Mark Best

As well as all the new CSS features we mentioned previously, Firefox 3.6* is gaining a brand new property value: image-rect. This allows you to clip an area of a background image to display only part of the whole.

It uses Mozilla’s proprietary prefix, and takes two values: a URI for the image, and the boundaries of the clipped area (as four comma separated values, like the clip property):

foo { background-image: -moz-image-rect(
url(<uri>),
<top>,<right>,<bottom>,<left>
); }

So as an example:

.aside {
background-image: -moz-image-rect(
url('link.png'), 0, 32, 26, 0);
}

The most immediate use of this will be for making image sprites, but I’m sure the creative CSS community will be able to think of more applications for it.

I’ve created a quick demo for this; if you have a recent nightly*, you should be seeing a single picture of Link above, which changes on mouseover. Anyone not running a recent nightly will see three static Links.

* Despite image-rect being planned for inclusion in 3.6, it currently only works in nightlies of Firefox 3.7 (mozilla-central branch).