Chapter
13
Chapter 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.
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:
- LINK="white" makes links that
haven't been visited recently white.
- VLINK="gray" makes recently
visited links gray.
- ALINK="green" makes links briefly
blink green when someone clicks on them.
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:
- FF means full brightness
- B0 means 75-percent brightness
- 80 means 50-percent brightness
- 40 means 25-percent brightness
- 00 means none of this color 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.asp
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 guide, 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.
- If you have a scanner or digital camera, try using
some textures from around the house or office, such as the top of a wooden desk, leaves of
houseplants, or clothing.
- When you select an area to make into a tile, try to
choose part of the image that is fairly uniform in brightness from side to side.
Otherwise, the tile may not look seamless even after you use the Create Seamless Pattern
option.
- You must also use a big enough image so that you can
leave at least the width and height of the tile on either side of your selection. If you
don't, when you select Create Seamless Pattern you'll get a message saying Your
selection is too close to the edge to complete this operation.
- You can also make some almost-automatic textures with
the paper texture feature in the paintbrush style palette in Paint Shop Pro. Selecting
Image | Special Filters | Add Noise followed by Image | Normal Filters | Blur and Colors |
Colorize can make great paper textures, too.
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.asp |
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 ed or legally protected in some other way.
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
- Try getting creative with some background tiles that
don't use Create Seamless Pattern. You'll discover some sneaky tricks in Chapter 14 for
making background tiles that don't look like background tiles, but I bet you can figure
out some interesting ones on your own right now. (Hint: What if you made a background tile
2,000 pixels wide and 10 pixels tall?)
- If you have some photos of objects for a Web-based
catalog, consider taking the time to paint a transparent color carefully around the edges
of them. (Sometimes the magic wand tool can help automate this process.) You can also use
Paint Shop Pro's Image | Special Effects | Add Drop Shadow feature to add a slight shadow
behind or beneath each object, so they appear to stand out from the background.
|