Multiple Backgrounds

Old Method:

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
    .box2 {
    width: 100%;
    height: 100%;
    background: url(images/text.png) center center no-repeat;
    }
</style>
 
<div class="box">
    <div class="box2">
        <!--CONTENT-->
    </div>
</div>

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn’t it?

CSS3 Method:

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>