Putting it All Together - HTML5 with CSS3 - page 349

.blurb {
background-color: #e6f2f9;
background-image: url(images/quote-left.png), url(images/quote-right.png) ;
background-position: left top, right bottom ;
background-repeat: no-repeat;
}
There's no limit to the number of background images for a given element. The first value represents the
top-most image, with subsequent values appearing on lower layers, and the last value declared appears
on the bottom of the stack.
You can do the same with the shorthand background property, declaring each set of values separated by
commas. However, even though an element can now carry more than one background image, it can still
have only one solid background color; you can't layer multiple colors in a single element. If you include a
solid fill color with a multiple background shorthand declaration, the color must appear with the last
declared (bottom) background:
.blurb {
background: url(images/quote-left.png) left top no-repeat, 
#e6f2f9 url(images/quote-right.png) right bottom no-repeat;
}
Figure 10-4 shows the result: a single element with two background images in two different positions. Even
with this basic example you can begin to imagine the possibilities, especially if you layer translucent PNG
images over each other.
Figure 10-4. Two background images in the same element. This wasn't possible before CSS3.
For Power Outfitters, we're using multiple backgrounds to fill the browser window with two different
patterns that repeat across the window, one positioned at the top and one at the bottom. We'll apply these
backgrounds to the root html element rather than the body element; you'll see soon that we have other
plans for the body element that don't make it a good candidate to carry this background.
We'll also add a value for the background-scroll property. By default, background images scroll in the
window along with the content; as content moves up or down out of view, so does the background behind
it. Declaring background-scroll:fixed (or including the fixed value in the shorthand background