Multiple background css

Question

I want to add multiple background image using css for my site.I use this code.

#container{
 margin:0 auto;
 width:1154px;
 background:url(../img/background-top-new.jpg) no-repeat, url(../img/background-middle.jpg) repeat-y;
 height:auto;
}

I face this problem in ie. If you have any solution for this problem please give me any solution.

Answer 1

Multiple background images is a CSS3 feature, which means it is only supported by the latest versions of Firefox, Chrome, Safari and Opera.

You may be able to reproduce the same effect in IE though, but you will have to do it with multiple divs (1 background/div)

Answer 2

IE doesn't currently support multiple background images (except for IE9). There is a workaround using DirectX filters that allows you to specify 2 backgrounds but it's far from being optimal: http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

The most portable solution is to create multiple divs and stack them in layers.

Answer 3

CSS3 MUltiple background is not supported in IE6,7,8 and Firefox below 3.5

http://www.quirksmode.org/css/background.html

You can do with tricks

http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html