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:

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 [‚Ķ]