Hour 13

Backgrounds and Color Control

Nearly every sample Web page in Chapters 1 through 12 has a white background and black text. In this chapter, you'll find out how to make pages with the background and text colors of your choice. You'll also discover how to make your own custom background graphics, and how to let the background show through parts of any image you put on your Web pages. To Do: The black-and-white figures printed in this book obviously don't convey colors very accurately, so you may want to view the sample pages online at: 

http://www.mcp.com/sams/books/235-8/examples.htm#chapter13

You can also try the colors on your own Web pages as you read about how to make them.

Background and Text Colors

To specify the background color for a page, put BGCOLOR="blue" inside the <BODY> tag. Of course, you can use many other colors other than blue. You can choose from the 16 standard Windows colors: black, white, red, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver, and teal. (You can call magenta "fuschia" and cyan "aqua" if you prefer.)

You can also specify colors for text and links in the <BODY> tag. For example, in Figure 13.1 you'll notice the following <BODY> tag: 

<BODY BGCOLOR="red" TEXT="yellow" LINK="white" VLINK="gray" ALINK="green">

As you probably guessed, TEXT="yellow" makes the text yellow. There are three separate attributes for link colors:

Because I used pure red as the background color in the graphics images, they blend right into the background of the Web page.

Time Saver: Here's a neat trick: If you make the VLINK color the same as the BGCOLOR color, links to pages that a visitor has already seen will become invisible. This can make your page seem "smart"--offering people only links to places they haven't been. (Note, however, that it may also annoy anybody who wants to return to a page they've already seen!)

Figures 13.1 and 13.2 illustrate how color can be used in combination with links.

If the 16 named colors don't include the exact hue you're after, you can mix your own custom colors by specifying how much red, green, and blue light should be mixed into each color.

The format is #rrggbb, where rr, gg, and bb are two-digit hexadecimal values for the red, green, and blue components of the color. If you're not familiar with hexadecimal numbers, don't sweat it. Just remember that FF is the maximum, 00 is the minimum, and use one of the following codes for each component:

Figure 13.1. You can specify colors for the background, text, and links in the <BODY> tag of any Web page.

Figure 13.2. On a color screen, this page has a red background, yellow body text, and white link text, as specified in Figure 13.1.

For example, bright red is #FF0000, dark green is #004000, bluish-purple is #8000B0, and medium-gray is #808080. As another example, the custom colors in Figure 13.3 specify a deep indigo background with steel blue text and a fuschia link that turns white after it's been visited (see Figure 13.4).

For a very handy chart showing the hexadecimal color codes, along with the colors they create, go to 

http://www.pheonix.net/~jacobson/rgb.html

Figure 13.3. For exact control of colors, you can use hexadecimal color codes instead of English color names.

Figure 13.4. On a color screen, the background on this page is indigo, with silvery blue text.

Time Saver: Even though you can specify millions of different colors, many computers are set to display only the 16 named colors. All others will be approximated by dithered patterns, which can make text look messy and difficult to read. Also, you should be aware that different computers may display colors in different hues. I recently designed a page with a beautiful blue background for a company I work for--only to find out later that the president of the company saw it on his computer as a lovely purple background! The moral of the story: Stick to the named colors and don't waste time mucking with hexadecimal color codes, unless you have precise control over the computer displays of your intended audience.

Though the colors you specify in the <BODY> tag apply to all text on the page, you can also change the color of a particular word or section of text using the <FONT> tag. This is discussed in Chapter 6, "Font Control and Special Characters."

Time Saver: You can set the color of an individual link to a different color than the rest by putting a <FONT> tag with a COLOR attribute after the <A HREF>. (Also include a </FONT> tag before the </A> tag.) Microsoft Internet Explorer 3.0, however, will always display all links with the colors set in the <BODY> tag.

Background Image Tiles

Background tiles are all the rage on the Web these days. They let you specify an image file to be used as a wallpaper tile behind all text and images in a document. You put the image filename after BACKGROUND= in the <BODY> tag like this: 

<BODY BACKGROUND="image.gif">

For example, the tile.gif file referred to by the <BODY> tag in Figure 13.5 is an image of one small tile. As you can see in Figure 13.6, most Web browsers will repeat the image like a floor tile, behind any text and images on the page.

Figure 13.5. You can specify a background image to tile behind a page in the BACKGROUND attribute of the <BODY> tag.

Figure 13.6. The tile.gif file (specified in Figure 13.5) is automatically repeated to cover the entire page.

Caution: Tiled background images should be implemented with great care in order to avoid distracting from the main content of the page itself. The text in Figure 13.6, for example, would be difficult to read if I hadn't made it all a big <H1> heading. Many pages on the Web are almost impossible to read due to overdone backgrounds. So before you include your company logo or baby pictures as wallpaper behind your Web pages, stop and think. If you had an important message to send someone on a piece of paper, would you write it over the top of the letterhead logo or on the blank part of the page? Backgrounds should be like fine papers: attractive, yet unobtrusive.

Transparent Images

The astute observer of Figure 13.6 (that's you) will notice that the background tiles show through portions of the rectangular image. You'll often want to use partially transparent images to make graphics look good over any background color or background image tile.

Figure 13.7 shows the image from Figure 13.6, as it looked in Paint Shop Pro when I created it. (Figure 13.7 also shows the single tile used for the background in Figure 13.6.)

Figure 13.7. When I saved this image in Paint Shop Pro, I made the background color transparent.

To make part of an image transparent, the image must have 256 or fewer colors and you must save it in the GIF file format. (JPEG images can't be transparent.) Most graphics programs that support the GIF format allow you to specify one color to be transparent. To Do: To save a transparent GIF in Paint Shop Pro, follow these steps:

1. Select Colors | Decrease Color Depth | 256 Colors or Colors | Decrease Color Depth | 16 Colors, and check the Optimized and Nearest color boxes (as recommended in Chapter 10, "Creating Web Page Images").

2. Choose the eyedropper tool.

3. Right-click the color you want to make transparent.

4. Select File | Save As...

5. Choose the GIF-CompuServe image format and Version 89a-Noninterlaced or Version 89a-Interlaced Sub type. (See Chapter 10 for more about interlaced versus noninterlaced images.)

6. Click the Options button.

7. Choose Set the transparency value to the background color as shown in Figure 13.8 and click OK.

8. Enter a name for the file, then click OK to save it.

Figure 13.8. Paint Shop Pro's GIF File Preferences dialog box lets you choose which palette color will become transparent.

Time Saver: For a masked preview of which part of the image will be transparent, click on the Preview button shown in Figure 13.8. This will temporarily replace the transparent color with the current foreground color. To emphasize the transparent color permanently, select Colors | Edit Palette and change the transparent palette color to some outrageous fluorescent green or another highly visible hue. If some areas aren't transparent that should be, use the color replacer tool to change their color.

Creating Your Own Backgrounds

Any GIF or JPEG image can be used as a background tile. But pages look best when the top edge of a background tile matches seamlessly with the bottom edge and the left edge matches up with the right.

If you're clever and have some time to spend on it, you can make any image into a seamless tile by meticulously cutting and pasting, while touching up the edges. You'll find the exact steps for doing this in my book, Creating Your Own Web Page Graphics, by Que Publishing.

Paint Shop Pro provides a much easier way to automatically make any texture into a seamless tile. You simply use the rectangular selection tool to choose the area you want to make into a tile, and then select Image | Special Effects | Create Seamless Pattern. Paint Shop Pro crops the image and uses a sophisticated automatic procedure to overlay and blur together opposite sides of the image.

In Figure 13.9 I did this with part of an image of the palm of my hand, taken with an inexpensive digital camera. The resulting tile, shown as the background of a Web page in Figure 13.10, tiles seamlessly but has the flesh tone and texture of skin.

You'll find similar features in other graphics programs, including Photoshop (use Filter | Other | Offset with Wrap turned on), Kai's Power Tools, and the Macintosh programs Mordant and Tilery.

Figure 13.9. Paint Shop Pro can automatically take any region of an image and make it into a background pattern that can be easily made into tiles.

Figure 13.10. The results of Figure 13.9 used as a background image for a Web page.

To Do: Here are some tips for making your own background tiles with Paint Shop Pro.

Finding Good Backgrounds

If you just cannot seem to get the pattern you want, there are hundreds of sites on the Internet that offer public domain background images that you are free to use, or inexpensive professionally designed backgrounds. A good starting place is Gini Schmitz' Textures and Backgrounds Wonderland at: 

http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html

If you happen to see a background image on someone else's page that you wish you could use on your own page, it is a simple matter to click on the background with the right mouse button and select Save Background As to save a copy of it. Be careful, though, to ask the person who created the image if you can use it, because the image could very well be copyrighted or legally protected in some other way.

Coffee Break: You'll see an unconventional use of background tiling at the newly wallpapered 24-Hour HTML Café:

http://www.mcp.com/sams/books/235-8/cafe13.htm

(Can you figure out what I did and how I did it? If not, see Chapter 14, "Page Design and Layout," for some hints.) You'll also find a selection of snazzy backgrounds you can use for your own pages at the Background Underground lounge:

http://www.mcp.com/sams/books/235-8/bgu/bgu.htm

While you're checking out the backgrounds, you'll get an animated appetizer hot from Chapter 12, "Creating Animated Graphics."

Summary

In this chapter, you learned how to set the background and text colors for a Web page. You also found out how to make a tiled background image appear behind a Web page, how to make foreground images partially transparent so the background shows through, and how to create seamless image tiles for use as backgrounds.

Table 13.1 summarizes the attributes of the <BODY> tag discussed in this chapter.

Table 13.1. Attributes of the <BODY> tag covered in Chapter 13.
Tag Attribute Function
<BODY>...</BODY>

Encloses the body (text and tags) of the HTML document.

BACKGROUND="..." The name or address of the image to tile on the page background.

BGCOLOR="..." The color of the page's background.

TEXT="..." The color of the page's text.

LINK="..." The color of unfollowed links.

ALINK="..." The color of activated links.

VLINK="..." The color of followed links.

Q&A

Q Doesn't Netscape Navigator let people choose their own background and text color preferences?

A Yes, and so does Microsoft Internet Explorer. Both programs allow users to override the colors you (as a Web page author) specify. So some may see your white-on-blue page as green-on-white, or their own favorite colors, instead. But very few people turn on the overriding document option, Always use my colors, so the colors specified in the <BODY> tag will usually be seen.

Q I've heard that there are 231 "magic colors" that I should use to look good in Netscape Navigator. Is that true?

A Here's the real story: There are 231 colors that will appear less "fuzzy" to people who operate their computers in a 256-color video mode (the other 25 colors are used for menus and stuff like that). So some Web page authors try to stick to those colors. However, true color or high color computer displays are increasingly common, and they show all colors with equal clarity. On the other hand, lots of people still use a 16-color video mode, which makes most of the 231 "magic" colors look fuzzy, too. I recommend sticking to the 16 named colors for text and using whatever colors you want for graphics.

Q Can older versions of Web browsers see my custom colors and background tiles?

A Some won't. Users of Mosaic will see only gray backgrounds. Early versions of Netscape Navigator (before 2.0) will display hexadecimal-coded colors, but won't recognize color names. However, everything will look right in Netscape Navigator 2.0 or higher and Microsoft Internet Explorer version 2.0 or higher.

Quiz Questions

1. How would you give a Web page a black background and make all text, including links, bright green?

2. How would you make an image file named texture.jpg appear as a repeating tile behind the text and images on a Web page with white text and red links that turn blue after being followed?

3. If elephant.jpg is a JPEG image of an elephant standing in front of a solid white backdrop, how do you make the backdrop transparent so only the elephant shows on a Web page?

4. Which menu choice in Paint Shop Pro automatically creates a background tile from part of any image?

Answers

1. Put the following at the beginning of the Web page:
<BODY BGCOLOR="black" TEXT="lime" LINK="lime" VLINK="lime" ALINK="black">

Or the following would do the same thing:
<BODY BGCOLOR="#000000" TEXT="#00FF00" LINK="#00FF00" VLINK="#00FF00" ALINK="#000000">

2. <BODY BACKGROUND="texture.jpg" TEXT="white" LINK="red" VLINK="blue" ALINK="black">

3. Open the image in Paint Shop Pro, then use Colors | Decrease Color Depth | 256 Colors to pick the best 256 colors for the image. Right-click on the white area, and use File | Save As to save it in the GIF 89a format. Click the Options button to make the background color transparent before you save.

4. Image | Special Effects | Create Seamless Pattern. See the Paint Shop Pro documentation if you need a little more help using it than this chapter provided.

Activities