The Background Property

The background property is a shortcut means to set all the first five properties at the same time. Its values are all the possible values of those five properties. You may set from one to five of the properties in any order. However, this property always sets all five of the properties regardless of whether you explicitly set values for all five. If you don't explicitly set a value for a specific property, the background property uses that property's initial value as the property's value. For example:

 BODY { background: red } 

only the value of the background-color property has been set. The background property assumes the initial values for all the other properties. In contrast:

 P { background: url(chess.png) gray 50% repeat } 

sets values for four of the properties, but not that for the background-attachment property; hence, that property's value is the initial value (which is scroll). In other words, the previous rule is exactly equivalent to

 P {   background-image: url(chess.png);   background-color: gray;   background-position: 50%;      /* = 50% 50% */   background-repeat: repeat;   background-attachment: scroll; /* implicit */ } 

You can separately set the five aspects of a background color, image, repeat, scrolling and position but we don't recommend this as a rule. The different aspects of a background are so tightly linked in how they work to produce effects that you could end up with some unexpected, even weird, results. For example, setting a background-repeat value without setting the image at the same time may produce a strange-looking background. The same is true with specifying an image without also setting the color behind it. In both cases, problems could arise when style sheets are cascaded. Cascading involves using more than one style sheet for your document; for example, yours (that is, the designer's), the browser's default style sheet, and possibly one attached by the user. If you were to specify an image without also setting a color behind it, the background might be composed of any combination of background from these three style sheets.

Although the user might be able to adjust his style sheet to compensate for such an effect, you as the designer should be careful to set all pertinent aspects at the same time so that all aspects work together to produce pleasing results. The background property is the shortest way to set all five aspects of the background, and using it ensures that you don't forget one of them.