THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 251

But what if you want a little quarter-wheel in every corner (see Figure 7-27)? Previously, you
would have nested a bunch of div s just inside the quotebox div . With CSS 3, just keep
adding them to the background declaration.

.quotebox { background :
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat ;
background-color : #FFF ;}

Figure 7-27: Applying two backgrounds to the same element.

Comma-separate each background value to get multiple backgrounds (see Figure 7-28).

253

.quotebox { background :
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat ;
background-color : #FFF ;}

Figure 7-28: Applying four backgrounds to a single element.

h e ef ect here is extremely similar to nesting a bunch of div s. It's just that with CSS 3, you
don't have to bother any more.