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.