home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeHTML & XHTML: The Definitive GuideSearch this book

5.3. Document Colors and Background Images

The HTML 4 and XHTML standards provide a number of attributes for the <body> tag that let you define text, link, and document background colors, in addition to defining an image to be used as the document background. Internet Explorer extends these attributes to include document margins and better background image control. And, of course, the latest style sheet technologies integrated into the current browsers let you manipulate all these various display parameters.

5.3.1. Additions and Extensions to the <body> Tag

The attributes that control the document background, text color, and document margins are used with the <body> tag. Section 3.8.1, "The <body> Tag" The bgcolor attribute

One standard, although deprecated, way you can change the default background color in the browser window to another hue is with the bgcolor attribute for the <body> tag. Like the color attribute for the <font> tag, the required value of the bgcolor attribute may be expressed in either of two ways: as the red, green, and blue (RGB) components of the desired color or as a standard color name. Appendix G, "Color Names and Values" provides a complete discussion of RGB color encoding along with a table of acceptable color names you can use with the bgcolor attribute.

Setting the background color is easy. To get a pure red background using RGB encoding, try:

<body bgcolor="#FF0000">

For a more subtle background, try:

<body bgcolor="peach"> The background attribute

If a splash of color isn't enough, you may also place an image into the background of a document with the background attribute in its <body> tag.

The required value of the background attribute is the URL of an image. The browser automatically repeats (tiles) the image both horizontally and vertically to fill the entire window.

You normally should choose a small, somewhat dim image to create an interesting but unobtrusive background pattern. Besides, a small, simple image traverses the network much faster than an intricate, full-screen image.

Figure 5-21 shows you how the extended browsers render a single brick to create a wall of bricks for the document background:

<body background="pics/onebrick.gif">
Figure 5-21

Figure 5-21. One brick becomes many in a Netscape background

Background images of various dimensions and sizes create interesting vertical and horizontal effects on the page. For instance, a tall skinny image might set off your document heading:

<body background="pics/vertical_fountain.gif">
<h3>Kumquat Lore</h3>
For centuries, many myths and legends have arisen around the kumquat.

If the vertical_fountain.gif is a narrow, tall image whose color grows lighter towards its base and whose length exceeds the length of the document body, the resulting document might look like the one shown in Figure 5-22.

Figure 5-22

Figure 5-22. A tall and skinny background

You can achieve a similar effect horizontally with an image that is much wider than it is long (see Figure 5-23).

Figure 5-23

Figure 5-23. A long and skinny background

The background attribute is deprecated in HTML 4 and XHTML, since you can achieve similar effects using style sheets. The text attribute

Once you alter a document's background color or add a background image, you also might need to adjust the text color to ensure that users can read the text. The HTML 4/XHTML text standard attribute for the <body> tag does just that: it sets the color of all nonanchor text in the entire document.

Give the text attribute a color value in the same format as you use to specify a background color (see bgcolor in Section, "Allowed content") -- an RGB triplet or color name, as described in Appendix G, "Color Names and Values". For example, to produce a document with blue text on a pale yellow background, use:

<body bgcolor="#777700" text="blue">

Of course, it's best to select a text color that contrasts well with your background color or image.

The text attribute is deprecated in HTML 4 and XHTML, since you can achieve similar effects using style sheets.

5.3.2. Extending a Warning

The various color and image extensions work wonderfully, particularly the colorful ones, assuming that all users have a 256-color display, lots of available memory, unlimited network bandwidth, and good visual acuity. In reality, many users have monochrome or limited color displays, limited memory for caching images, extremely restricted network bandwidth, and poor vision.

Because of these limitations, you should seriously consider not using any of these extensions in your documents. Much like early users of the Macintosh felt compelled to create documents using ransom-note typography ("I've got 40 fonts on this thing, and I'm going to use them all!"), many authors cannot avoid adding some sort of textured background to every document they create ("I've got 13 wood grains and 22 kinds of marbling, and I'm going to use them all!").

In reality, except for the very clever ones, texture-mapped backgrounds add no information to your documents. The value of your document ultimately lies in its text and imagery, not the cheesy blue swirly pattern in the background. No matter how cool it looks, your readers are not benefiting and could be losing readability.

We advise you not to use the color extensions except for comparatively frivolous endeavors or unless the extension really adds to the document's value, such as for business advertising and marketing pages. Problems with background, text, and link colors

There also are a slew of problems you will encounter if you play with background colors, including:

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.