Tuesday, March 24th, 2009
Firefox support for CSS3 multiple backgrounds
Category: Browsers, CSS
, Firefox
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;
-
Related Content:
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.