Two backgrounds on css style possible?

Question

Hi!, i have a web page using a css style file who have this property:

body { 
   background: #7a9c12 url(images/main_background.jpg) top center no-repeat; 
   color: #bbb;
   font: 12px/14px helvetica, arial,Sans-serif; 
}

As you can see this code only puts a background image on the top center on the div body. But, i need a background image in the botton center too of the body tag, how can i do this? Thanks!

Answer 1

With CSS3, you can have multiple backgrounds, separated by commas. See the documentation. e.g.

background: url(banner.png) top center no-repeat, 
            url(footer.png) bottom center no-repeat;

Answer 2

With CSS2.1, no, it's impossible. With CSS3, yes, you can.

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.

Reference: W3C.

Answer 3

An option if you're not using CSS3 is to layer the background images on your html and body tags:

html {
   background: #7a9c12 url(images/main_background_top.jpg) top center no-repeat;
}

body {
   background: url(images/main_background_bottom.jpg) bottom center no-repeat;
}

Just make sure you only apply a solid background colour to the html background property, otherwise you'll overlay the image and only see the body background image.