CSS3: Multiple background images explained

CSS3 has introduced us to many wonderful features that we always expected. One of the best features amongst all those is the "multiple background images". It gives us the freedom of attaching multiple background images to a div, p, span etc.

Here is how it works in practical -

<style type="text/css">
@font-face{
font-family: HoneyScript;
src:url(HoneyScript-Light.ttf) format("truetype");
}
.multipleBGs{
margin: 0 auto;
width: 600px;
padding: 10px;
text-align: center;
background: rgba(244, 244, 230, 0.9);
border: 1px solid #d1d1d1;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;

box-shadow: 6px 6px 20px #999999;
-moz-box-shadow: 6px 6px 20px #999999;
-webkit-box-shadow: 6px 6px 20px #999999;
}
.attachBgs{
height: 200px;
padding: 24% 0 8% 0;
background: url(design1.png) no-repeat left top, url(design2.png) no-repeat left bottom, url(design3.png) no-repeat right top, url(design4.png) no-repeat right bottom;
font-family: "HoneyScript", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #638cc5;
}

</style>

<div class="multipleBGs">
<div class="attachBgs">Welcome to the world of multiple backgrounds</div>
</div>

CSS3 Backgrounds compatibility table - http://www.quirksmode.org/css/background.html

Note: Mobile UI developers - please don't wait for w3c's 100% recommendation to CSS3. This feature works perfectly on webkit engine. Use it! Use it now!