Mar 9, 2010
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
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.
Please check out this feature in IE: 6,7,8 versions doesn’t support this!
Fixed the post… thanks
Thanks for sharing this.
For the other posters, stop moaning about no support for IE, give yourself a break!
Is it posible to set different background-size for each background?
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…
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.
its a great feature for me & everyone…
but IE…. (it should die)
Thanks for this article!
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)