Code: Background shorthand property

From Chapter 7: CSS Optimization

The background property is a shorthand property that sets the background properties of an element as a color, an image, or, as a fallback, both. The background property sets the following properties: background-color, background-image, background-repeat, background-attachment, and background-position, in one shorthand notation. The syntax for the background property is as follows:

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> inherit

Here is a minimalist example:

body {background: gray;}

This CSS rule sets the background-color of the body element to gray. It is better to use the body rather than the html element here, which targets the entire HTML document.

This shorthand rule is equivalent to:

body {
    background-color: gray;
    background-position: 0% 0%;
    background-size: 30% 30%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: none;
}

A more complete example of a background shows the entire rule:

div { background: gray url(steel.png) repeat fixed 50%; }

This shorthand rule is equivalent to:

div {
    background-color: gray;
    background-image: url(steel.png)
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
}

For more information on background shorthand, see http://www.w3.org/TR/CSS21/colors.html and http://www.w3.org/TR/css3-background/.