How can I create a custom background and set the colors for my web page?

The capability to do this was introduced by Netscape in version 1.1 of that product. By now, many web browsers support it.

This is accomplished using attributes of the <BODY> tag. HTML authors who are unfamiliar with the <BODY> tag need to know that the <BODY>...</BODY> tags should enclose everything in the document except for the <TITLE> tag at the beginning. (The <TITLE> tag should be enclosed in a <HEAD> tag, although this is optional. For further details about the proper syntax of an HTML page, consult the w3 consortium web pages <URL:http://www.w3.org/>.)

The following short HTML document makes extensive use of this feature. Try pasting this HTML into a file and opening it with your web browser.

<HEAD>
<TITLE>Color Test</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" 
         TEXT="000000" 
         LINK="00FF00" 
         VLINK="CC33FF"
         ALINK="FF0000">

<H1>Color Test</H1>
<P>
This page contains black text on a white background.
<a href="http://www.boutell.com/">Links</a> are
displayed in green. 
Once visited, links are displayed in yellow. When active,
links are be displayed in red.
</BODY>

The BGCOLOR attribute sets the background color. The TEXT attribute sets the text color. The LINK attribute sets the color for links. The VLINK attribute sets the color for links you have already visited, and the ALINK attribute sets the color for links that are active at that moment.

"Sure, but what do the numbers and letters mean?"

Those are hexadecimal digits: two digits for red, two digits for green, and two digits for blue. 00 is black (absence of color) and FF is maximum intensity.

Fortunately, you don't need to understand that. Just use Doug Jacobson's RGB Hex Triplet Color Chart <URL:http://www.phoenix.net/~jacobson/rgb.html>, which provides the appropriate values for lots of nifty colors.

Please note: if your page is difficult to read, people will not read it. Please use the background attributes tastefully unless it is your intention to alienate your readership.

"How about background images?"

To set a background image, use the BACKGROUND attribute of the <BODY> tag. For instance, a page with the body tag <BODY BACKGROUND="tile.gif" BGCOLOR="FFFFFF"> displays the contents of the image file tile.gif as its background. If the user prefers not to load images, which is quite common, then the BGCOLOR attribute is used instead (see above). It is important to set a reasonable BGCOLOR as an alternative to your BACKGROUND attribute.

For More Information

A separate FAQ <URL:http://www.sci.kun.nl/thalia/guide/color/faq.html> on the subject is maintained by Mark Koenen. Consult that document for more information.

A library of background images, icons and replacements for the normal <HR> tag is also available. <URL:http://jupiter.ufr924.jussieu.fr:1998/nabil.html>

World Wide Web FAQ