Geek Answers Handbook

Is it possible to use two CSS-style backgrounds?

I have a webpage using a CSS style file that has 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 places the background image in the upper center of the body. But, I need a background image in the center of the botton of the body tag too, how can I do this? Thanks!

+4
source share
3 answers

The option, if you are not using CSS3, is to overlay background images on the 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 apply only the solid background color to the html background property, otherwise you will overlay the image and see only the background image of the body .

+2
source

With CSS3, you can have multiple comma separated backgrounds. See the documentation. eg.

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

With CSS2.1 no, this is not possible. With CSS3, yes you can.

Box backgrounds can have multiple layers in CSS3. The number of layers is determined by the number of values, separated by commas, in the 'Background-image.

Reference: W3C .

+1
source

More articles:


All Articles