New background rules in Firefox 3.6

Warning This article was written over six months ago, and may contain outdated information.

The lat­est alpha release of Fire­fox 3.6 (3.6a1) con­tains some new rules for pro­vid­ing back­grounds to ele­ments: mul­ti­ple back­ground images, back­ground-size, and an imple­men­ta­tion of the Webkit gra­di­ent pro­pos­al (mod­i­fied from the orig­i­nal — more on that later).

I’ve put togeth­er a very rough demo of what you can do with these new rules; you’ll require a recent build of Fire­fox 3.6 or Webkit to view it. Try resiz­ing the win­dow to dif­fer­ent dimen­sions, and see how it changes.

Here’s an expla­na­tion of how I did it:

The first div has a radi­al gra­di­ent applied to it using the background-image property:

background-image: -moz-radial-gradient(center, 10px, center, 480px, from(#aedae5), to(white));
background-repeat: no-repeat;

The posi­tion­al val­ues (cen­ter and pix­el val­ues) instruct where to start the radius from, and where to end it; in my exam­ple, I’m start­ing 10px from the cen­ter and radi­at­ing out to 480px. The sec­ond val­ues (from, to) set the start and end colours for the gra­di­ent. All of these dec­la­ra­tions accept many more val­ues than I’ve shown here.

Mozil­la’s imple­men­ta­tion dif­fers from the Webkit pro­pos­al in a few sig­nif­i­cant ways, the most obvi­ous being that Webkit uses a sin­gle rule (-webkit-gradient) with a type val­ue (lin­ear or radi­al), where­as Mozil­la use two rules (-moz-linear-gradient and -moz-radial-gradient). Mozil­la’s imple­men­ta­tion also tiles unless background-repeat is set to no-repeat.

The Mozil­la Dev Cen­ter page explains the dif­fer­ences in more detail. Hav­ing just used both in build­ing this demo, I have to say that the Mozil­la imple­men­ta­tion is more log­i­cal a lit­tle eas­i­er to learn.

The sec­ond part of my demo uses mul­ti­ple back­grounds on the inter­nal div to dis­play Foxkeh behind the cut-out letters:

background:
url('images/ff3_6.png') no-repeat 50% 50%,
url('images/foxkeh.png') no-repeat 50% 50%;

The stack is cal­cu­lat­ed in descend­ing order, so the first val­ue takes prece­dence over the second.

Final­ly, to make sure that my let­ters always fill the screen, I’ve used back­ground-size to stretch the image over its con­tain­ing element:

-moz-background-size: 100% 100%, auto;

I’ve used two com­ma-sep­a­rat­ed val­ues to match the mul­ti­ple back­grounds above; the first val­ue stretch­es the back­ground image to 100% of its con­tain­er, the sec­ond keeps Foxkeh at his nat­ur­al size.

If you plan to use these dec­la­ra­tions you may also be inter­est­ed in image ren­der­ing; how­ev­er, that’s beyond the scope of this post. 

It’s good to see Mozil­la being more exper­i­men­tal, and nice for us to have new dec­la­ra­tions to exper­i­ment with. I hope that Mozil­la and Webkit agree on a com­mon imple­men­ta­tion of gra­di­ents, so that the pro­pos­al becomes accept­ed more quickly.

10 comments on
“New background rules in Firefox 3.6”

  1. The link to the demo is broken. :-(

  2. Hi Mar­cy,

    The link works fine for me; if you’re not using Fire­fox 3.6 or a recent Safari you’ll just see a blank page; is this the issue you’re experiencing?

  3. […] Peter Gasston has put togeth­er a demo of some of these new fea­tures on his blog. Relat­ed Posts­Fire­fox 3.1 is the lat­est to pass our selec­tors testCSS3 sup­port in Fire­fox 3.1Opera […]

  4. “where­as Mozil­la use two rules (–moz-webkit-lin­ear and –moz-webkit-radi­al).”

    Some­thing’s not quite right here :-)

  5. […] Bro­ken-Links has put up a very rough demo of how these new rules can affect you as a devel­op­er, do check it out HERE. […]

  6. @Michael — Ooops! Now cor­rect­ed, thank you.

  7. […] Pełny sup­port dla selek­torów CSS3, back­ground-size, CSS gra­di­ents, mul­ti­ple back­ground images, 94/100 w Acid3. To wszys­tko w nowym Fire­fok­sie. I jeszcze przykład­owe testy. […]

  8. […] also get new back­ground rules such as back­ground-size and multiple […]

  9. Peter, thank you very much for this. This saved me a lot of time, espe­cial­ly for the mul­ti­ple back­grounds for the divs.

  10. […] More details on the Fire­fox imple­men­ta­tion from Bro­ken Links […]