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.