Web Design in a Nutshell, 3rd Edition

background-image is the basic property for adding an image to the background (the “canvas”) of an element. When applied to the body element, it functions just like the background attribute, causing the image to tile horizontally and vertically until it fills the browser window. Unlike the background attribute, the background-image property can be applied to any element in the document, both block and inline.

Figure 20-3 shows background images applied to a whole page and to an individual paragraph using these style rules.

    body {background-image: url(stripes.gif);}
    p.highlight {background-image: url(dots.gif);}

The background-image property is not inherited (in fact, none of the background properties are). Instead, the pattern merely shows through the descendant elements because their background colors are transparent by default. If tiling images were inherited, the result would be a mess in which a new tiling pattern would begin in the top-left corner of each new element on the page.

If a background-color property is also specified, the image is overlaid on top of the color. Always provide a similar background color for an element when you add a background image. That way, if the image fails to load, the text and foreground elements maintain a readable contrast against the background.

Figure 20-3. The background-image property applied to an entire page and a single paragraph