0

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

5 Answers 5

5

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/

2
  • And how widely supported is CSS3? Can CSS2 also do this, and is it better supported? Thanks
    – Evanss
    Apr 1, 2011 at 14:50
  • I don't believe multiple backgrounds are supported in CSS2.1. This will work in all the modern greats, FF 4, Chrome, Safari 5 and Opera 10 I believe. Even IE9 should have some support
    – Alex
    Apr 1, 2011 at 14:53
2

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

1

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

0

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

0

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..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.