CSS3 MULTIPLE BACKGROUNDS
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;
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
jay on Mar 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 on Dec 18, 2010
It is a mistake – MSIE < 9 multiple background unable to render…
Vladimir on Mar 11, 2010
Please check out this feature in IE: 6,7,8 versions doesn’t support this!
Sergio Jasinski on Mar 11, 2010
Fixed the post… thanks
Darren Azzopardi on Mar 30, 2010
Thanks for sharing this.
For the other posters, stop moaning about no support for IE, give yourself a break!
devSkripatch on Apr 14, 2010
Is it posible to set different background-size for each background?
Matt Elliott on May 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 on May 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 on Jul 31, 2010
its a great feature for me & everyone…
but IE…. (it should die)
Thanks for this article!
Jeff on Sep 07, 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)
Dwight Stegall on Oct 17, 2010
It would be nice to see new regular posts on this blog occasionally instead of once every 6 months or more.
dselva on Dec 09, 2010
Nice Post… This is not supporting by IE6,7,8.
Banhawi on Apr 23, 2011
Multiple backgrounds is one of the best additions to css , really like that feature saves me a lot .
macem on May 06, 2011
IE6-8 don’t support html5 and many CSS3 rules, maybe IE9 :). For now please
macem on May 06, 2011
use PIE
Sanjay Kumar on Dec 02, 2011
thnks buudy……….i must say IE should be died….!!!!!!