CSS3 MULTIPLE BACKGROUNDS

On 10.09.10, In BLOG, by Sergio Jasinski

Here is a very simple example showing the use of multiple background images in one div. Is this the end of nested elements with tons of CSS to create a layered effect? Hope so.

#multipleBG {

border: 5px solid #cccccc;
background:url(img1) top left no-repeat, url(img2) bottom left no-repeat, url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;

}

Browser Support:
FireFox 3.6 and later, Google Chrome 1.0, Opera 9.6, Safari 3.2.1

EXAMPLE

Sergio Jasinski

Visit Authors Website | All Articles From This Author

DONATE

Please help CSS3.com stay alive and running

17 Responses

jay

3.11.2010

I am sorry to say so, but it doesn’t work in IE.

You say “FireFox 3.6 and later, Google Chrome 1.0, IE 6 and later, Opera 9.6, Safari 3.2.1 ” but I don’t think so. Just tested it in IE8, and no, nothing.

PeTaX

12.18.2010

It is a mistake – MSIE < 9 multiple background unable to render…

Vladimir

3.11.2010

Please check out this feature in IE: 6,7,8 versions doesn’t support this!

Sergio Jasinski

3.11.2010

Fixed the post… thanks

Darren Azzopardi

3.30.2010

Thanks for sharing this.

For the other posters, stop moaning about no support for IE, give yourself a break!

devSkripatch

4.14.2010

Is it posible to set different background-size for each background?

Matt Elliott

5.18.2010

This is pretty great thanks.

Im glad it doesn’t work with IE.
That browser seriously needs to die.
Maybe if less and less things work on it everyone will wake up.
I confounds and boggles my mind that a large amount of the US population uses it.

sigh…

Roy

5.19.2010

IE has a higher market share simple because its pre-installed.

Mozilla has to make the installation of their browser more intuitive and maybe even more attractive.

Designers could provide a link to Mozilla website if its a IE browser.

But face it, the average users don’t have a problem with IE. Its the designers/developers, who are the ones finding ways to cover its short comings.

umarfaruk

7.31.2010

its a great feature for me & everyone…

but IE…. (it should die)

Thanks for this article!

Jeff

9.7.2010

I can’t believe I’m hearing the rant for IE support on this site. People harping about IE support, do you not know that IE chose to make their own rules and ignore the “standards”? Don’t ask w3c to fix this, ask IE to adopt the true standards. (Check out IE10)