Cascading Style Sheets: The Definitive Guide, Second Edition

Backgrounds

The background area of an element consists of all of the space behind the foreground out to the outer edge of the borders; thus, the content box and the padding are all part of an element’s background, which and the borders are drawn on top of the background.

CSS lets you apply a solid color or create moderately sophisticated effects using background images, and its capabilities in this area far outstrip those of HTML.

Background Color

It’s possible to declare a color for the background of an element, in a fashion very similar to setting the foreground color. For this, you use the property background-color, which accepts (unsurprisingly) any valid color or a keyword that makes the background transparent.

background-color

Values

<color> | transparent | inherit

Initial value

transparent

Applies to

all elements

Inherited

no

Computed value

as specified

If you want the color to extend out a little bit from the text in the element, simply add some padding to the mix, as illustrated in Figure 9-8:

p {background-color: gray; padding: 10px;}

Figure 9-8. Backgrounds and padding

You can set a background color for just about any element, from body all the way down to inline elements such as em and a. background-color is not inherited. Its default value is transparent, which makes sense: if an element doesn’t have a defined color, then its background should be transparent so that the background ...