HTML and CSS [Electronic resources] نسخه متنی

Attaching a Background Graphic

You can attach a background graphic to the document or any element, just as you can with background color. There are more ways to control backgrounds with CSS, though, giving you a broad range of options when it comes to applying visual design to your site. By combining a page background with element backgrounds, you can create layers of images and numerous special effects.

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.

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.

NOTE

Tiling images in a background is normal behavior for the browser. Wit179, 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.