HTML and CSS Reference
In-Depth Information
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: content-box;
background-color: #D2E1E6;
background-attachment: scroll; /* default value */
Using the individual properties is more verbose, but is probably much easier to maintain. Figure
8-26
shows
how IE 9 renders the background.
Figure 8-26.
IE 9 renders the CSS3 background shorthand property faultlessly
Opera and Chrome also display css3_shorthand.html correctly. However, at the time of this writing, Firefox
and Safari fail. Instead, they ignore the background completely and just display the border and text. This is
because browsers must ignore any style declaration that contains an invalid value. Of course, in this case, the
value isn't invalid. It's just that the browser doesn't understand it. By the time you read this, the latest versions
of Firefox and Safari will probably have caught up with the CSS3
background
shorthand values. However, older
browsers never will.
The failure of IE 6-8 to understand the CSS3 shorthand syntax for multiple backgrounds makes it possible to
add multiple background images in modern browsers while providing a fallback in older ones.
Adding Multiple Background Images to an Element
CSS3 allows you to add multiple background images to an element by listing the image sources as a comma-
separated list. The first image in the list is displayed at the front, and all subsequent images are displayed behind.
Obviously, adding multiple images to an element only makes sense if you control the default repeat pattern
and other background properties. Consequently, in CSS3-compliant browsers all background properties except
background-color
accept a comma-separated list of values, which need to be in the same order as the images. If
a property has only one value, the same value applies to all images.
