Web Design in a Nutshell, 3rd Edition

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 class="a">Fusce rhoncus facilisis sapien.</p>
    <p class="b">Fusce rhoncus facilisis sapien.</p>
    <p class="c">Fusce rhoncus facilisis sapien.</p>

Figure 20-2. The background-color property