IE6, CSS Sprites and Alpha Transparency

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.

buy antibiotics online next day delivery uk. cheap antibiotics for sinus infections. | resume professional writers review | briquette charcoal | Why overspend on cheap car insurance policy? Shop www.cheapcarinsurance.com and spend less.

8 thoughts on “IE6, CSS Sprites and Alpha Transparency

  1. Stubbornella

    Keep in mind that the alpha image loader doesn’t work when images / js / html reside on different servers. Often the case for large commercial sites.

    I’ve been bitten once because the testing environment was all on the same server and the prod was dispersed. The bug only appeared when published.

  2. Oliver Nassar

    Clever, good post. Kinda sucks as it requires me to change my markup which is valid and works perfectly on ie7/ff/O, but will try to use a ie6 only style sheet without changing the markup.

    Either way, real clever. Great blog.

  3. Matt

    Great stuff, will use in the future.

    For now I think I’ll simply let IE6 have multiple http requests on the current site I was attempting to optimise.

Comments are closed.