Two backgrounds on css style possible?

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 p开发者_运维技巧uts 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!

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.

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.

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;