|
Most websites feature white
backgrounds. Or they sit on a navy or gray background --
but most of the screen is still white, like a page of
paper set against the darker background. Occasionally, you
might run across more interesting colors - reds and
purples and greens and rust – often looking more gaudy
than professional.
But every now and then,
there is a website with a photo or a drawing or a pattern
background. This tutorial will show you not just how to
place a background on your website, but five clever ticks
to spice up the background without resorting to gaudiness.
The basic html code to
place a background on your web page is very simple:
To place a background in a
table, perhaps set against a solid color page background,
here is the basic html code:
The image file called
image.jpg now becomes your background. A typical image
would show up "tiled". In other words, it
repeats itself horizontally and vertically to fill the
screen. This usually does not look very professional, so
here are five tricks to clean it up and spice it up.
1. Use "strip"
graphics. Strip graphics are simply very long images that
stretch across the screen. When they repeat, they repeat
one below the other. To see this in action, view my page
at http://www.thehappyguy.com/SEO.html.
The yellow strip along the right side looks like it is
part of the top banner image. But it is a 650 by 20 strip
image, mostly white, with a touch of yellow along the left
side. This works well with patterns that vary only from
left to right
2. Hold the background in
place. When a visitor scrolls down, the text rolls over
the image. I used this trick at my personal website: http://www.leonhardtonline.com
(Please forgive the mess – I never seem to find the time
to clean it up.) The html code to do this is:
This works for patterns,
but it works best for photos or drawings, such as a faded
image of your company logo or a faded scenery shot or a
faded photo of people interacting. (Remember that the
background should not stand out at the expense of the
foreground text and images, which is why you want faded
images.)
3. Another great background
trick is to place a smaller picture in the background,
such as your company logo or some other image that you do
not want to take up the entire screen. This works best
against a white background. Here is the html code:
If you want the image to
show up just in a table:
I used this function in
just one cell of a table by inserting it in my tag for my
navigation menu at http://www.vitamin-supplements-store.net
. Notice how the faded bottle is in the background behind
the navigation links, but it does not repeat down the
page.
4. You can further control
the position of the background image. Consider the
following code:
We now have a background
that fills the top right corner of the page. Depending how
big it is, it might cover most of the screen or just the
corner.
5. Another way to use
background images are as navigation buttons. While search
engines can easily follow image links, they don't carry
the same relevancy as keyword-rich text links. A
background button image can make a text link look like a
button. Each navigation link would have to be placed
within its own table or cell, then apply the code used in
the previous example.
Used properly, background
images can greatly enhance the appeal of your website. If
you are looking for a way to spice up your website, these
four tricks can help.
|
