Using Background Images on Web Pages, and Resources

How to design them, create them, and use them. And where to find them.

How To Create Them

Background images can be GIF or JPEG; PNG and other formats may (soon) be options in some browsers. You can get ready-made background images from many sources - see end of this page for a list. Even better, create your own with a graphics program. Keep the file size small; a few Kbytes should be enough. Any larger and there is probably too much detail in your image for the text to be readable. Usually you want the image to tile seamlessly - i.e. the join between tiles should not be discernable. Some graphics programs can make seamless tiles.

To create a left-border effect, create a graphic about sixteen hundred pixels wide and only a few pixels tall. If the browser display window were somehow widened past sixteen hundred pixels, the background image would tile horizontally as well, but not too many users will stretch their windows that far (and most monitors are not that wide).

How To Use Them

The BODY tag has a BACKGROUND attribute to specify the URL of an image that is to be used as a background for the document.

<BODY	Background	=
	    "/Authoring/Graphics/Images/bluesq.gif"
	Bgcolor	= "#000000"
	Text	= "#ffcc66"
	Link	= "#ffff99"
	Vlink	= "#ffcc33"
	Alink	= "#ff0000"
	>

The attribute's value is the URL of the graphic that will be tiled as the background of the page. The user will not see this background in non-compliant browsers, if image loading is turned off, or if the user has overridden the background images in their preferences. If a background file specified in the Background attribute cannot be found, the color specified by the BGCOLOR tag will be used. The BGCOLOR will also be used if the user has auto load images off. The background image will be tiled in the browser's document viewing area.

Design Issues

A couple of problems to watch out for: make sure the background image and text and link colors contrast well. There are many pages on the web that are unreadable because the text or links are swallowed up by the background color. They probably looked fine to the page designer on their own screen, but unfortunately screens - and other people's eyes - vary considerably.

Take care about the amount of detail in the image. Too much - in fact, almost any - can reduce readability. If it does, you might find it better to place a plain color behind the text, e.g. by enclosure in a table cell, or by using style sheets.

When specifying a background image it is a good idea also to specify a background color. That color should be one similar to the prevailing color of the image; this ensures that if the user viewing your page has image loading off, or if your background image cannot be loaded for some reason, the page will still look close to the way you intended.

If the image you specify as a background has transparent areas, the BGCOLOR will show through (beware, this can show up as black on Macs). The attribute sets the color of the background as "#rrggbb" where "#rrggbb" is a hexadecimal red-green-blue triplet.

Take care to select a default color similar to the background image's predominant color, and to explicitly set the foreground and link colors to contrast adequately for readability. An extremely common error is to assume that everyone's default text color is black...

As you should already be aware, it is bad practice to load a background or any other image to your page, from another person's web site, without their prior agreement. And be aware that if you do, your page will suffer the consequences if their server goes down or if they move the images.

Further Resources

Patterns 4 Us	These backgrounds can be viewed in a left-frame, and when clicked on the right-frame is re-displayed with the background. The text remains readable with all backgrounds because it is enclosed in a table cell with a white background color.
Netscape's Background Sampler	To obtain these backgrounds and use them in your own pages you can either refer to them on Netscape's server, or copy them and use them yourself.
Textures for HTML 3.0 Clients	Another site that permits downloading from their server. A small but interesting selection.
The Clip Art Connection: Background Images Archive	There are approximately 700 background images archived at this site, more than half of them original. The remainder are a sampler and very subjective "Best Of" selection from about half of the 70 or so collections listed.