Tuesday, March 24th, 2009
Firefox support for CSS3 multiple backgrounds
James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.
Usage?
CSS:
-
-
background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
-
background-repeat: repeat-y;
-
background-position: top left, top right;
-
4.5 rating from 40 votes
Finaly !
This feature is far more important (and needed) than border-radius or css-gradient.
Yay!!! At last!!
This was in the top-10 of my wishlist for FF :)
Can’t wait until this is pervasive enough to start implementing. The uses are endless!
hmm , this is awesome no doubt, but i can’t think of any use right now..
maybe its something that u just need to ran into. but i have no problem without it… CSS gradient for me seems cooler, it will be something u’de see everywhere onces implemented.
One obvious use is stying rounded corners – right now you have to use three nested DIVs with paddings set up correctly. With this, such a complicated solution will no longer be necessary (well, whenever IE gets around to supporting it that is)
@sos: I guess u’re right..but this is for things with complex graphics that cannot be rounder via CSS or JS.
hmm, can I have one image repat and the other on no-repeat ?
who will overlap who when dealing with PNGs?
this calls for a demo page with every thinkable case.
I would love to see an attempt at every thinkable case… :P
Looks like multiple backgrounds (at least the example @ quriksmode) works in the latest version of Chrome (2.0.169.1)
Yeah, now if IE would just get it’s ass in gear…
sos –
3 rounded corner images?
Try DD_Roundies
http://www.dillerdesign.com/experiment/DD_roundies/
There are limitations on elements but it’s years ahead of non-vector solutions.
It is about time. This is the one thing I have been waiting on forever. Adding a top and bottom repeatable background image finally made easy. And there is a million other applications for this. There were so many pointless aesthetic things added before this (drop shadows, rounded corners etc) but hey it is finally here..almost.