New background rules in Firefox 3.6

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

The latest alpha release of Firefox 3.6 (3.6a1) contains some new rules for providing backgrounds to elements: multiple background images, background-size, and an implementation of the Webkit gradient proposal (modified from the original — more on that later).

I’ve put together a very rough demo of what you can do with these new rules; you’ll require a recent build of Firefox 3.6 or Webkit to view it. Try resizing the window to different dimensions, and see how it changes.

Here’s an explanation of how I did it:

The first div has a radial gradient 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 positional values (center and pixel values) instruct where to start the radius from, and where to end it; in my example, I’m starting 10px from the center and radiating out to 480px. The second values (from, to) set the start and end colours for the gradient. All of these declarations accept many more values than I’ve shown here.

Mozilla’s implementation differs from the Webkit proposal in a few significant ways, the most obvious being that Webkit uses a single rule (–webkit-gradient) with a type value (linear or radial), whereas Mozilla use two rules (–moz-linear-gradient and –moz-radial-gradient). Mozilla’s implementation also tiles unless background-repeat is set to no-repeat.

The Mozilla Dev Center page explains the differences in more detail. Having just used both in building this demo, I have to say that the Mozilla implementation is more logical a little easier to learn.

The second part of my demo uses multiple backgrounds on the internal div to display 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 calculated in descending order, so the first value takes precedence over the second.

Finally, to make sure that my letters always fill the screen, I’ve used background-size to stretch the image over its containing element:

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

I’ve used two comma-separated values to match the multiple backgrounds above; the first value stretches the background image to 100% of its container, the second keeps Foxkeh at his natural size.

If you plan to use these declarations you may also be interested in image rendering; however, that’s beyond the scope of this post.

It’s good to see Mozilla being more experimental, and nice for us to have new declarations to experiment with. I hope that Mozilla and Webkit agree on a common implementation of gradients, so that the proposal becomes accepted more quickly.

10 comments on
“New background rules in Firefox 3.6”

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

  2. Hi Marcy,

    The link works fine for me; if you’re not using Firefox 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 together a demo of some of these new features on his blog. Related PostsFirefox 3.1 is the latest to pass our selectors testCSS3 support in Firefox 3.1Opera […]

  4. “whereas Mozilla use two rules ( – moz-webkit-linear and –moz-webkit-radial).”

    Something’s not quite right here :-)

  5. […] Broken-Links has put up a very rough demo of how these new rules can affect you as a developer, do check it out HERE. […]

  6. @Michael — Ooops! Now corrected, thank you.

  7. […] Pełny support dla selektorów CSS3, background-size, CSS gradients, multiple background images, 94/100 w Acid3. To wszystko w nowym Firefoksie. I jeszcze przykładowe testy. […]

  8. […] also get new background rules such as background-size and multiple […]

  9. Peter, thank you very much for this. This saved me a lot of time, especially for the multiple backgrounds for the divs.

  10. […] More details on the Firefox implementation from Broken Links […]