HTML From the Ground Up

by L. Downs

Backgrounds and Colors

One of the easiest and most effective things you can do to dress up your Web pages is to add a background color or image. Whatever you place on your Web page will seem to "float" on top of this background. Of course, there are hazards...

Adding a background color or image to your page involves a change to just one tag: the <BODY> tag that appears near the top of your Web page. Let's look at colors first. You can add a solid color background by adding the attribute BGCOLOR="[color]" to the <BODY> tag, like this:

<BODY BGCOLOR="YELLOW">

This will change the background color of your page to yellow (Example 1), overriding whatever default color the user has chosen.

NOTE: Most browsers give users the option of setting their own colors, and of also specifying that those colors can not be overridden by the settings in a Web page. Never assume that the user will actually see the same background color that you specify; at best you can only hope that your page will display as you intended.

As you will recall from an earlier lesson, you can specify the following colors by name:

AQUA	BLACK	BLUE	FUCHSIA	GRAY	GREEN	LIME	MAROON
NAVY	OLIVE	PURPLE	RED	SILVER	TEAL	WHITE	YELLOW

Some browsers will also let you add "LIGHT" or "DARK" to some of these colors (LIGHTBLUE, DARKRED, etc.). However, you risk having your colors ignored by browsers that don't, so this is not a recommended practice. Very few of these colors actually create readable pages, anyway, and some of them are not very pleasant to look at.

There is a way to specify the precise color you want, but it's a bit involved, involving a counting system called hexadecimal (what you would have learned in school if you had 8 fingers on each hand instead of 5). A single hexadecimal digit can be a number between zero and fifteen, by using the first few letters of the alphabet to count past 9. And you don't really even need to know that, so we'll drop the math right there.

What you do need to know is that you specify a hexadecimal color code by using a pound sign and the 6-digit hexadecimal number (which can be a combination of letter and numbers) in quotes, like this (Example 2):

<BODY BGCOLOR="#D9C714">

In a hexadecimal number, the first two digits are the "parts" of red, the second two the "parts" of green, and the third two the "parts" of blue (as in "217 parts red, 199 parts green, and 20 parts blue"). You can actually create colors by trial and error, as long as you realize that you cannot use any letters past "F" ("#F86B25" is a legal hexadecimal number, but "#ZEBRA5" is not). Theoretically there are up to 256 different values of each color possible, which comes to over 16,000,000 possible colors, so it would seem that you could use absolutely any color you wanted using this system.

Unfortunately the real world doesn't work that way. Although more and more home computers can display all 16,000,000+ colors, there are still many that can't. Some can only display 256 colors at a time, and many of the new LCD monitors can only display 16,000 or 32,000. This might seem like a lot, but when the browser starts converting your perfect but unavailable shade of robin's-egg-blue to a convenient puce green the limitations become painfully apparent.

To get around this, the HTML standard specifies a limited number of colors called "Web-safe" colors, and which all browsers are supposed to support. These colors are created by limiting each color to one of these "legal" values: 00, 33, 66, 99, CC, and FF. Any hexadecimal color made up only of combinations of these values should display properly on any browser, such as #FFCC99, #333300, etc. This makes up a total of 210 possible colors, plus the named colors above. You can view a chart of the "Web-safe" colors (plus a few others) at http://www.lynda.com/hexh.html.

You will quickly find that black text is unreadable on most backgrounds that are anything less than very light. You can easily change the color of all the text in your page, so that for example you have yellow text on a dark blue background, by adding more attributes to the <BODY> tag. They are (with some sample colors):

LINK="YELLOW" (the color of unvisited links)
VLINK="AQUA" (the color of visited links)
TEXT="WHITE" (the color of all other text)

For example, for a dark blue ("navy") page with white text, yellow visited links and blue-green ("aqua") unvisited links, you would have a <BODY> tag that looked like this (Example 3):

<BODY BGCOLOR="NAVY" LINK="YELLOW" VLINK="AQUA" TEXT="WHITE">

Because of differences in the default background colors between browsers, it's a good idea to explicitly set at least your background color and text color, even if all you want is black on white. Otherwise the user may not see what you expect them to see. (Of course, the user can override your color choices in any case. Nothing is certain, expecially on the Web.)

Even more glamorous is a page with an actual background image. To do this, you'll recall that you use the attribute BACKGROUND instead of BGCOLOR, and give the filename of the graphic to be used as a background like this (Example 4):

<BODY BACKGROUND="gcanyon.gif">

The browser will "tile" your image (fill up the page with multiple copies of it) if it's not as large as the browser window (Example 5). This makes it possible to have very small background files that still fill up the screen.

NOTE: On the Web, filenames are case sensitive. This means that if you've used capital letters in a link and not in the filename itself, or vice versa, your link may work while you're testing it on your PC and yet fail when posted to a Web server. To be on the safe side, it's recommended that you avoid capital letters entirely when naming and linking to files. For similar reasons, though somewhat more complicated ones, you should also avoid using spaces in filenames.

A particularly "cool" kind of background is one shaped like a narrow rectangle lying on its side, with a small graphic at the far left. When the browser tiles this, the page comes out as having a repeating picture along the left edge (this can be notebook punched holes, flowers, etc.) with the rest of the background blank so it doesn't conflict with your Web page content (Example 6). One warning: if the image isn't wide enough it will start to tile again on the right, and your left border will reappear in the middle of your page. You also need to move your text away from the left (more on this in a later installment). You can find entire archives of backgrounds (and other images) on the web; try a Web search using the terms "clipart" and "free" for some useful sites.

That's it for this lesson. Coming next: Making your links go anywhere you want.

Terms to know from this lesson

Hexadecimal color code: A numeric color code consisting of a pound sign (#) and six digits (0-9 and/or A-F), specifying the proportions of red, green and blue in the following order: #RRGGBB.

Web-safe color: A color selected from a limited palette of colors chosen to reproduce correctly on most browsers. A "Web-safe color" will have a hexadecimal code made up only of the digits 00, 33, 66, 99, CC and/or FF.

LINK attribute: Used in the <BODY> tag to specify the color of unvisited links.

VLINK attribute: Used in the <BODY> tag to specify the color of visited links.

TEXT attribute: Used in the <BODY> tag to specify the color of text which is not part of a link.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.