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:
<body background=image.jpg>
To place a background in a table, perhaps set against a solid
color page background, here is the basic html code:
<table background=image.jpg>
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 SEO page. 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: (Please
forgive the mess - I never seem to find the time to clean it up.)
The html code to do this is:
<BODY background="image.jpg" bgproperties="fixed">
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:
<BODY background="image.jpg" style="background-repeat: no-
repeat;">
If you want the image to show up just in a table:
<table background=image.jpg style="background-repeat: no-
repeat;">
I used this function in just one cell of a table by inserting it
in my <td> tag for my navigation menu at my liquid vitamins
store. 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:
<table background=image.jpg style="background-repeat: no-
repeat; background-position: top right;">
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.
About author:
David Leonhardt is a freelance writer and SEO specialist.
Contact him at:
Info@TheHappyGuy.com or visit his website on how to be happy. Get a daily motivation and inspiration ebook or
read
more webmastering articles.
