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?

  1. background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
  2. background-repeat: repeat-y;
  3. background-position: top left, top right;

Posted by Dion Almaer at 5:39 am
10 Comments

++++-
4.4 rating from 45 votes

10 Comments »

Comments feed TrackBack URI

Finaly !
This feature is far more important (and needed) than border-radius or css-gradient.

Comment by ywg — March 24, 2009

Yay!!! At last!!
This was in the top-10 of my wishlist for FF :)

Comment by LeaVerou — March 24, 2009

Can’t wait until this is pervasive enough to start implementing. The uses are endless!

Comment by unscriptable — March 24, 2009

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.

Comment by vsync — March 24, 2009

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)

Comment by sos — March 24, 2009

@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.

Comment by vsync — March 24, 2009

I would love to see an attempt at every thinkable case… :P

Comment by sixtyseconds — March 24, 2009

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…

Comment by jcolyer — March 24, 2009

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.

Comment by blinkingmarquee — March 26, 2009

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.

Comment by TylerHerman — September 18, 2009

Leave a comment

You must be logged in to post a comment.