5 Cool Website Background Tricks for a Professional Look

Submitted by David Leonhardt | Category: Programming | Published on Aug 19, 2004
Website backgrounds do not always have to be white or solid colors. Here are five tips for image backgrounds that look professional for your visitors.
Website Backgrounds: 5 Cool Tricks for a Professional Look By David Leonhardt

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:

<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 book 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 the Leonhardt website: (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:

tag for the navigation menu at my liquid vitamins site. 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:


Current Ratings: 4 by 6 visitors       Total Views : 4575
  How would you rate this article: 
  Bad           Good    
 » About the Author
Name: David Leonhardt

Back to Articles



Network Sites