HTML and CSS Reference
In-Depth Information
Using the background Shorthand Property
Instead of individual properties, you can wrap the definition in a single declaration using the background
shorthand property. All browsers support the CSS2.1 syntax, which combines the following properties:
background-color
background-image
background-repeat
background-attachment
background-position
Values can be in any order. Omitted values use the initial value listed in Table 8-1 at the beginning of this
chapter. For example, the body style rule in fixed.html contains four background properties:
body {
background-color: #FFF;
color: #000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 60px;
max-width: 600px;
background-image: url(images/border.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
They can be combined in a single shorthand rule as a space-separated list like this:
body {
color: #000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 60px;
max-width: 600px;
background: url(images/border.png) fixed no-repeat #FFF;
}
In this example, there's no value for background-position , so it defaults to 0% 0% —in other words, the top
left of the element.
The background shorthand property automatically resets all values to their defaults before assigning
the values given in the declaration. This can have unexpected consequences if you use the shorthand version at the
end of a style rule that already contains individual background properties.
Caution
To illustrate the problem with using the background shorthand property after individual properties in the
same style rule, shorthand_override.html contains the following style:
body {
color: #000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 60px;
 
 
Search WWH ::




Custom Search