Using Sprites :: Transparent PNGs in IE6

IE6 doesn't support transparent PNGs unless you use Microsoft's alpha filters. You can't use alpha filters for background images which is a key part of using sprites.

Fortunately, you can "sort of" simulate it. Julien Lecomte has this good write-up.

The key is to use the CSS clip property and to replace background with that. Here's my implementation --

.sprite-s0 {
width:47px;
height:62px;
_width:62px; /* Width of the sprite */
_height:672px; /* Height of the sprite */
background:url(spaceShipSprite.png) no-repeat 0 -30px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="spaceShipSprite.png", sizingMethod="scale");
_background:none;  /* Clears the background */
_margin-top:-30px;  /* We have to adjust for the position of the space ship */
_clip:rect(30px 47px 92px 0);
top:0;
left:0;
}

Here's the example.

The above selector rule applies different CSS properties depending on your browser. Of course, the underscore before the property only applies to IE6. Keep in mind that there's limitations to this approach.

First, clip isn't equivalent to background because unlike background, you're actually specifying the size of the sprite. When you use clip, you're showing the area that's not clipped. If you're not using animation, it looks identical to a background image. However, if you intend on animating the sprite, clip isn't effective because you're not moving the 47x62 sprite, but moving the entire 62x672 graphic.

Second, and this a big limitation, clip only works for absolutely positioned elements.

Knowing all of this, we probably won't be using this technique to animate our spaceship and its flying targets.