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

http://www.rgbstock.com jay

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
  
  It is a mistake – MSIE < 9 multiple background unable to render…
http://www.ridev.ru/ Vladimir

Please check out this feature in IE: 6,7,8 versions doesn’t support this!
http://www.myspace.com/1k Sergio Jasinski

Fixed the post… thanks
http://darrenazzopardi.wordpress.com Darren Azzopardi

Thanks for sharing this.

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

Is it posible to set different background-size for each background?
http://thegellab.com Matt Elliott

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

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.
http://www.umarfarukm.com umarfaruk

its a great feature for me & everyone…

but IE…. (it should die)

Thanks for this article!
Jeff

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)
Dwight Stegall

It would be nice to see new regular posts on this blog occasionally instead of once every 6 months or more.
http://www.dselva.com dselva

Nice Post… This is not supporting by IE6,7,8.
http://www.banhawi.com/ Banhawi

Multiple backgrounds is one of the best additions to css , really like that feature saves me a lot .
http://macem.net macem

IE6-8 don’t support html5 and many CSS3 rules, maybe IE9 :). For now please
- http://macem.net macem
  
  use PIE
http://www.sanjaysaar.blogspot.com/ Sanjay Kumar

thnks buudy……….i must say IE should be died….!!!!!!
http://www.webexstudios.com/ webexstudios

one of the most popular feature of CSS3. Thanks

CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog