Support for 3 background images in CSS?

I want to have 3 background images for a div. I know CSS2 and CSS3 can both handle 2 images, but can they handle 开发者_如何转开发3?

The background image is purely for cosmetic reasons so if it doesn't work in all browsers that may be ok. Should I use CSS2 or CSS3 for this and how widely supported are they?

Thanks

With CSS3 you can have as many as you want, I believe. You just chain them up with a comma:

http://www.css3.info/preview/multiple-backgrounds/

CSS2 can't do this but you could put 3 divs inside a container, each with a different background image:

.box { width:100%; height:100%; position:absolute; top:0px; right:0px }
.bg1 { background-image: url( <..image 1 url> ); }
.bg2 { background-image: url( <..image 1 url> ); }
.bg3 { background-image: url( <..image 1 url> ); }
.container { width:400px; height: 400px; position:relative; }

The HTML

...
<div class="container">
    <div class="box bg1"> </div>
    <div class="box bg2"> </div>
    <div class="box bg3"> </div>
</div>

This way you can control which is displayed in which order using the z-index attribute.

You could use a fourth div to put your content in, separating the backgrounds from the content

Hope this helps

Multiple backgrounds on a single element is only available in CSS3, and thus only supported by A-grade browsers such as Chrome, Safari and the latest Firefox.

An alternative solution that is CSS2 supported and should (in theory) work in IE8 (maybe 7) is the :before and :after pseudo classes. This helps keep your markup clean (not having to add multiple divs inside your container element) and should have a wider range of browser compatibility.

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

there's no support for multiple backgrounds (not even 2?) in CSS2 as far as I'm aware, CSS3 support will only be the more modern browsers, which doesn't include IE8 this time

usual method of apply two images is to use an extra wrapper div, put one image as background on the outer div and the other on the element itself or another wrapper div, suppose that would work for 3 too, but if that's too many wrappers how about 2 for all browsers and the third for the modern ones as your fallback , the third and others could be applied as a multiple background onto either of the afore mentioned wrapper/elements

If you want to quickly referance what CSS 2 or 3 can do and which browsers support the poperties then this website is great http://www.findmebyip.com/litmus/#target-selector

The only other way is as above for the moment, absolute positioned divs with background images applied to them, I used this method at work for IE6 compatablity..