Image slicing using CSS, also known as CSS sprites, is quickly becoming a very popular technique in web development as it can dramatically improve the performance of a site by reducing the number of HTTP requests (see this article for more information). Alpha transparency is also quickly becoming a favorite feature among web designers: nice transparent gradients, no more jagged edges, etc. What’s not to like?

The good news is that almost all browsers in the A-grade category support alpha transparency via the use of PNG. The bad news is that IE6 does not support alpha transparency natively. It requires the use of a filter involving the AlphaImageLoader activeX, which does not support background repeat or positioning, the heart of the traditional CSS sprites technique.

The traditional CSS sprites technique relies on the ability to control the background properties of an appropriately sized HTML element, masking out all but the needed part of the larger background image. I recently heard of another technique that instead relies on clipping. Here is the recipe:

• Create a block element (a DIV for example)
• Set its size to the same size as the large image used for the sprite.
• Set its background image.
• Clip it to show only a small portion of the sprite.
• Finally, position it appropriately.

The following example masks all but a 50 x 50 px portion of the master image:

#myDiv {
   width:400px; height:300px;
   background:url(sprite.png);
   clip:rect(100px,250px,150px,100px);
   position:absolute;
}

Unlike the traditional CSS sprites technique, this new technique can be used with the AlphaImageLoader filter to create alpha transparent sprites on IE6. Simply replace the line:

background:url(sprite.png);

with:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(↵
    src="sprite.png", sizingMethod="scale");

This technique does not offer any support for background repeat. However, if you only use patterns that can be stretched either horizontally or vertically, you can still use this technique. I put together a complete demo to illustrate this.