How to set Mutiple Background Images to DIV using CSS?

You must have seen multiple background images for the single block on many web sites. In this case many web designers make mistake of creating multiple DIV elements and setting single background image to each DIV and and then position each of them.
Now, there is more simple way using CSS we can set more than one background images to the DIV.
See the following code:


<style type="text/css">
<!--

#test {background:
url(topleft.gif) 0 0 no-repeat,
url(topright.gif) 100% 0 no-repeat,
url(botleft.gif) 0 100% no-repeat,
url(botright.gif) 100% 100% no-repeat;
padding: 25px;
background-color: #008000; color: #FFF;
font: bold small Arial, sans-serif;}
-->
</style>



And apply the above style to the DIV as follows:


<div id="test">
Let's add four images to a single background! I mean, why not?

</div>