Using the background Shortcut

Using the `background` Shortcut

As discussed in Lesson 2, "Using CSS Rules," shorthand properties allow the values of several properties to be specified within a single property. The background property can be used to combine background-color, background-image, background-repeat, background-attachment, and background-position.

When sorting shorthand properties, browsers will first set all the individual properties to their initial values, and then override these with values specified by the author.

A default background rule would be set to background: transparent none repeat scroll 0 0;. If the declarations used in this lesson are combined into the shorthand rule, they will override the default values for background-image, background-repeat, and background-position. The result will be background: transparent url(chapter6.jpg) repeat-y scroll 100% 0;.

However, the rule can be shortened to include only the values that are needed, so the final declaration will be background: url(chapter6.jpg) repeat-y 100% 0; (see Listing 6.6).

Listing 6.6. CSS Code Styling the `<body>` Element with a Shorthand `background` Property

body {     background: url(chapter6.jpg) repeat-y 100% 0; }