Section 20.2. Background Color

20.2. Background Color

It's been common practice to add a background color to a page using the bgcolor attribute in the body element in HTML. With CSS, not only can you provide a background color for a whole page, but for any element in the document, both block-level and inline. Boxes of color anywhere you want them . . . and no tables required!

Background color is declared with the (no surprise here) background-color attribute.

background-color

---

Values:

     <color> | transparent | inherit 

Initial Value:

     transparent 

Applies to:

All elements

Inherited:

No

Background properties are applied to the "canvas" behind an element. With regard to the box model, background colors fill the content area, the padding area, and extend behind the border to its outer edge. This means that if the border has gaps, the background color will show through.

Background properties are not inherited, but because the default value is transparent, the parent's background color shows through its child elements. Figure 20-2 shows an example of the background-color property. Note how a little padding added to the element gives the content a little breathing room inside the resulting rectangular colored box.

     p {padding: 5px;}     p.a {background-color: #333333;}     p.b {background-color: #666666;}     p.c {background-color: #CCCCCC;}     <p >Fusce rhoncus facilisis sapien.</p>     <p >Fusce rhoncus facilisis sapien.</p>     <p >Fusce rhoncus facilisis sapien.</p> 

Figure 20-2. The background-color property