background-size implemented in Firefox 3.6

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

Firefox 3.6 has become the latest browser to support the CSS3 background-size property (although the first to do so according to the latest W3C spec.).

Using it is pretty simple:

div {
background-image: url('image.png');
-moz-background-size: 80%;
}

This, along with multiple background-images, is going to go a long way towards cleaning up mark-up and prettifying the web.

4 comments on
“background-size implemented in Firefox 3.6”

  1. A very nice addition, though I’m still waiting to crop a defined area from a background image. This would bring real power to using sprites and think would have a huge impact on how we handle background images.

  2. Niels, someone’s working on a patch for that at the moment, and it’s pretty close to being done. I don’t know whether or not it will make the immediate next release, because we recently split the codebase into a copy slated for the next release and a copy slated for continuing development. It’ll definitely land in the latter; I don’t know whether it’s planned to get it in the former (which might mean diverting attention from other next-release items to do so, since at a certain point every new thing to do means it takes that much longer to make the actual release).

    Beyond that, there’s other background fun coming down the pipe as well, but I’m not going to steal other people’s thunder and mention anything specifically. However, it’s all in bugzilla.mozilla.org if you’re willing to make the effort to find it.

  3. Further to Jeff’s comment, I see that that feature has landed: -moz-image-rect.

  4. I’ve written a post about the new background clipping feature at CSS3.info:

    http://www.css3.info/firefox-3-6-adds-background-clipping/