Specifying Custom Colors

If none of the named colors imparts 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. It works a little bit like Play-Dohjust mix in the amounts of red, blue, and green you want to get the appropriate color .

The format is # rrggbb , in which 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 and 00 is the minimum, and use one of the following codes for each component:

FF means full brightness.
CC means 80 percent brightness.
99 means 60 percent brightness.
66 means 40 percent brightness.
33 means 20 percent brightness.
00 means none of this color component.

For example, bright red is #FF0000 , dark green is #003300 , bluish-purple is #660099 , and medium-gray is #999999 . To make a page with a red background and dark green text, the HTML code would look like the following:

<body style="background-color:#FF0000; color:#003300">

Although the colors you specify in the <body> tag apply to all text on the page, you can also use either color names or hexadecimal color codes to change the color of a particular word or section of text by using the color style property in conjunction with the <span> tag. This is discussed in Hour 12.

Did you Know?

For a very handy chart showing the 216 most commonly used hexadecimal color codes, along with the colors they create, go to http://www.samspublishing.com.

You should be aware that different computer monitors may display colors in very different hues. I recently designed a page with a beautiful blue background for a client, only to find out later that the president of the company saw it on his computer as a lovely purple background! Neutral, earth-tone colors such as medium gray, tan, and ivory can lead to even more unpredictable results on many computer monitors , and may even seem to change color on one monitor depending on lighting conditions in the room and the time of day.

The moral of the story: Consider sticking to the named colors unless you have precise control over your intended audience's computer displays or you're willing to test your page on various monitors. Of course, testing your pages on different computers is very important, and should be done anyway.

Using Background Image Tiles

Background tiles let you specify an image to be used as a wallpaper pattern behind all text and graphics in a document. You specify the background image filename using the background-image style property in the <body> tag at the beginning of your page:

<body style="background-image:url(http://flylib.com/books/4/158/1/html/2/backimage.jpg)">

Like other web graphics, background tiles must be in the GIF, PNG, or JPEG file format, and you can create them by using graphics software. For example, the water.jpg file referred to by the <body> tag in Listing 9.2 is an image of one small tile with a watery texture. As you can see in Figure 9.2, most web browsers will repeat the image behind any text and images on the page, like tiles on a floor.

Figure 9.2. The `water.jpg` file (specified in Listing 9.2 and shown separately in Figure 9.3) is automatically repeated to cover the entire page.

Figure 9.3. The `water.jpg` background tile is surprisingly small, but when it's tiled repeatedly (see Figure 9.2), the effect is relatively seamless.

By the Way

You might be wondering what happens if you set both a background color and a background image for a web page. The background image is displayed over the background color but the color is allowed to show through any transparent areas of the image. So you can certainly use both styles at once if you plan on taking advantage of transparent areas in the background image.

Listing 9.2. Tiling Background Images with the `background-image` Style Property in the `<body>` Tag

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Michael's Pond</title>
  </head>

  <body style="background-image:url(http://flylib.com/books/4/158/1/html/2/water.jpg)">
    <p style="text-align:center">
      <img src="pondtitle.gif" alt="Michael's Pond" />
    </p>
    <p>
      My backyard pond is not only a fun hobby but also an ongoing home
      improvement project that is both creative and relaxing. I have numerous
      fish in the pond, all Koi from various places as far as Japan, Israel,
      and Australia. Although they don't bark, purr, or fetch anything other
      than food, these fish are my pets, and good ones at that. The pond was
      built in a matter of weeks but has evolved over several years through
      a few different improvements and redesigns. I still consider it a work in
      progress, as there are always things to improve upon as I continue to
      learn more about how the pond ecosystem works, how to minimize
      maintenance, and how to get a more aesthetically pleasing look.
    </p>
    <p style="text-align:center">
      <a href="pond1.jpg"><img src="pond1_sm.jpg"
      alt="The Lotus, Floating Hyacinth, Japanese Lantern, and Waterfall All
      Add to the Drama of the Pond" style="border-style:none" /></a>
      <a href="pond2.jpg"><img src="pond2_sm.jpg"
      alt="Feeding Time is Always Full of Excitement"
      style="border-style:none" /></a>
      <a href="pond3.jpg"><img src="pond3_sm.jpg"
      alt="One of the Larger Fish Cruises for Dinner"
      style="border-style:none" /></a>
      <a href="pond4.jpg"><img src="pond4_sm.jpg"
      alt="A Dragonfly Hovers Over the Lotus for a Quick Drink"
      style="border-style:none" /></a>
    </p>
  </body>
</html>

Watch Out!

Tiled background images should be implemented with great care to avoid distracting from the main content of the page itself. Many pages on the Web are almost impossible to read due to overdone backgrounds.

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 .

As Figure 9.2 reveals, the pond sample page is made considerably more interesting with the addition of the water background image. However, the title image now has a funny -looking white edge around it, which certainly looks out of place. The problem has to do with the fact that the GIF image format supports only a single transparent color, which can't accommodate for the various levels of shading in the drop shadow of the text. This is where the PNG image you saw back in Hour 7, "Creating Your Own Web Page Graphics," enters the picture, as you'll see in the next section.

There is a style property I haven't mentioned that impacts tiled background images. I'm referring to the background-repeat property, which determines exactly how a background image is tiled on the page. Possible values for this style include repeat , repeat-x , repeat-y , and no-repeat . The default setting is repeat , which results in the image being repeated in both the X and the Y directions; this explains why I didn't have to use this style property in the example. The repeat-x and repeat-y settings allow you to repeat an image only across or down the page, but not both. And finally, the no-repeat setting causes the background image to be displayed only once, in the upper-left corner of the page.

Following is an example of tiling a background image across a page:

<body style="background-image:url(http://flylib.com/books/4/158/1/html/2/backimage.jpg); background-repeat:repeat-x">

Did you Know?

You might initially think that the no-repeat setting for the background-repeat style property makes no sense. However, you may come up with an unusual page design that requires a very large background image that doesn't need to tile. This is where the no-repeat setting could come in handy.

Buy on amazon.com >>

Oliver D., Morrison M

<< Previous page

Table of contents

Next page >>

Flylib.com

Category list

Similar pages

Specifying Custom Colors