Background graphics are typically either small tiles used to repeat to create a wallpaper pattern, or horizontal or vertical graphics with sections of color, imagery, and even typographic features. You can find many predesigned backgrounds online (see Figure 8-6), or you can create your own.
Figure 8-6. A background texture for a wallpaper effect I found at http://www.grsites.com/textures/.
First, let's have a go at attaching the background graphic to the document. This is done by selecting the body and creating a rule using the background-image property with a value of the image's location and name:
body {background-image: url(gray.jpg);}
Figure 8-7 shows the results of the tiled background within a web browser. You'll notice how the image tiles into the entire viewable area, creating an intriguing look.
Figure 8-7. Tiling a background in the body.
NOTE
Tiling images in a background is normal behavior for the browser. With HTML, you have no control over how an image tiles. As you'll soon see, CSS gives you far more control over how background images can be manipulated.
You can also add images to elements. If you wanted this image to appear in the background of all your headings, you could create the following rule:
h1, h2, h3, h4, h5, h6 {background-image: url(gray.jpg);}
In this case, all header backgrounds would use the background tile.
QUANTUM LEAP: GROUPING SELECTORS
The rule I just wrote with all headers separated by commas is a means of grouping selectors that all take the same rules. This way, I can group any selectors that share rules by naming the selector and following it with a comma:
h1, p, .footertext {color: teal;}
This way, H1, p, and the class of footertext will all be colored teal. You can continue writing additional rules for unshared styles:
h1 {font-size: 24px;}
With both of these rules in the same style sheet, both styles would be applied, resulting in the h1 being 24 pixels with a color of teal.