Web Design in a Nutshell, 3rd Edition

The background shorthand property takes a value from any of the background-related properties. There are no required values, and the values may appear in any order. The only restriction is that if two values are provided for background-position they must appear together and with the horizontal value first, followed immediately by vertical.

The following are valid examples of the background shorthand property:

    body {background: url(superstar.gif) fixed top center no-repeat; }
    div.intro {background: repeat-x url(topborder.gif) red; }
    p {background: #336600; }

Watch for Accidental Overrides

Bear in mind that because background is a shorthand property, values that are omitted will be reset to the default for those properties. That combined with the fact that later rules in a style sheet override previous rules makes it easy to accidentally override previously declared background properties with the defaults. In this example, the background image dots.gif will not be applied to h3 elements, because by omitting a value for background-image, it essentially set that value to none.

    h1, h2, h3 { background: red url(dots.gif) repeat-x;}
    h3 {background: blue; }

To override particular properties, be sure to use the specific background property you intend to change (background-color would be appropriate for the h3 in the example). When using the background (or any shorthand) property, pay attention to related rules earlier in the style sheet, or be sure that every property is specified.