Backgrounds
Tagging Backgrounds
  Background Images
You can have some interesting backgrounds display on your web page, such as the image you see in the background right now, with a very simple tag. Don't go overboard, though. If you decide to put a background image on your page, make sure that the contrast between your background image and text on the page is sufficient for easy reading. Busy and non-contrasting backgrounds are very distracting, and should be avoided. That's why I have NO background images on any of these pages apart from the one you're on, and it's only there to demonstrate a point.

To accomplish this simple feat, you first need a reasonable GIF or JPG image that will look good when tiled across the screen. The background tag should be located at the top of your HTML document. I usually insert it after the HEAD tag at the top; it hasn't given me any problems yet. The syntax follows:


<BODY BACKGROUND="background-image.jpg" >


There are a few things to think concerning the display of background images.

  • Make sure your background provides enough contrast with the text that will be displayed on top of it so that it is easily readable by your viewer. In image editing programs such as Adobe Photoshop, you can lighten the image intended as your background to any degree to allow the best contrast between normal black text and the background.

  • Backgrounds are automatically tiled, so take advantage of this by using the smallest image size possible for it. You can get away with an image that is 4 pixels by 4 pixels if you would like. You can also have an image that is 4 pixels high and 1000 pixels wide.

  • Some backgrounds such as the one you're viewing now, can take up most of the viewable colors if a viewer is using a computer capable of only 256 colors. Keep this in mind especially if you will be layering graphics on top of gradient or full color backgrounds.

  • If you are layering images on top of backgrounds, be very careful about your intended audience. There are many variables that determine image quality such as, the order the background and images are displayed on screen (e.g. different versions of Netscape load the background and images in different orders). Pre 2.0 versions of Netscape seem to load backgrounds first, and then foreground images. This may mean that a person running at a ghastly 16 colors or sometimes 256 colors, could possibly run out of colors before a foreground image is painted on the screen. When the foreground image is finally painted on the screen, it may be black because your browser can display no more colors on your monitor. This seems to only happen on the PC; the Macintosh seems to handle the color pallette much more elegantly and avoids this problem. Netscape 2.0 seems to load the background second, after foreground images have been painted on the screen, and does alleviate some potential problems.

  • Check on multiple platforms to see if your backgrounds and images are coming across as intended. The more varied platforms and configurations you can find, the better.



  Background Colors
You can also have a color displayed as the background instead of the image if you prefer. This may be preferable if your intended audience has only a limited ability to view colors (e.g. 256 colors or less) because an image background can sometimes take a lot of the available colors that could be used more efficiently to display more important foreground images. Colors have to be entered in hexidecimal notation in the tag, so I've followed the tag with some common color hexidecimal (hex) values. This tag should appear near the top of your HTML document, probably after your TITLE and HEAD tags, and before your BODY tag. Following is the syntax:


<BODY BGCOLOR="#FFFFFF" >


where #FFFFFF is the hex value corresponding to the color. The hex values correspond to the Red, Green, and Blue (RGB) values that make up a given color. The first two hex numbers (they're actually letters but represent numbers) are the Red values. The second two represent the Green values. And, the last two represent the Blue values. If you change the background color, make sure you also take a look at your page in a web browser to make certain your text is easily readable. If you need a different color of text to go on your new background, you can add the text option to the body bgcolor tag. With this you can specify the exact color you need (but of course it's in a hex value).


Common colors and their hexidecimal values.

White #FFFFFF
Canary Yellow #FFFF33
Orange #FF6600
Medium Gray #777777
Pink #FFCCFF
Fire Engine Red #FF0000
Deep Red #990000
Baby Blue #99CCFF
Royal Blue #0000FF
Bright Green #00FF00
Forest Green #007700
Purple #9900FF
Black #000000


Take a look at the College of Forestry's collection of available graphics, images, and backgrounds.


If you still want to know more about backgrounds, you can check out this Background FAQ. Or, you can look at some more examples of background colors. Also, here is a very convenient hexidecimal color chart.