Adding Backgrounds - Beginning CSS3 - page 176

The styles in multiple_images.html add two background images to a <div> like this:
#box {
/* Other styles omitted */
background-image: url(images/yachts.jpg), url(images/stripe.png);
background-position: center;
background-size: contain, auto;
background-repeat: no-repeat, repeat;
background-origin: padding-box, border-box;
background-clip: content-box, border-box;
background-color: #D2E1E6;
}
This adds yachts.jpg as the first image, with stripe.png behind. There's only one value for
background-position , so it applies to both images. In the remaining declarations, the first value applies to
yachts.jpg, and the second one to stripe.png. The values for yacht.jpg reset its size, prevent it from repeating,
and change its background positioning and painting areas. The other image, stripe.png, is automatically tiled
and covers the whole element. Finally, the background color is set to light blue. Figure 8-27 shows the result in a
modern browser (left) and in IE 8 (right).
Figure 8-27. Modern browsers support multiple background images, but older versions of IE don't
Older browsers regard commas as invalid in background property values, so they don't even display the first
background image. If I hadn't included background-color , there would be no background at all in the screen
shot on the right of Figure 8-27 .
In some cases, you might accept the background color as being sufficient fallback for older browsers.
However, you can exploit older browsers' inability to understand CSS3 shorthand to provide a single background
image as fallback. To do so, you need to specify the single image and other background properties first as
individual properties. Then you add the background shorthand for the multiple images.
The styles in multiple_images_safe.html show how this is done:
#box {
/* Other styles omitted */
background-image: url(images/yachts.jpg);