Originally published on the TOPP Design Blog

­Problem Summary

An element needs to support partial transparency – either an img tag, or an element with the background-image property set via CSS.

Use When

The page still needs to support IE6, and has elements which should be transparent.

Solution

Use CSS transparency, with appropriate selectors.

Example

CSS

* html .pngfix {
zoom: 1;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1 ? (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif") : (this.origBg = this.origBg ? this.origBg : this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='" + (this.currentStyle.backgroundRepeat=='no-repeat' ? 'crop' : 'scale') +"')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

Note: this method is adapted from the approach documented at http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/. It improves upon it by using zoom to trigger HasLayout in IE6, rather than relying on position: relative.

You can either add the “pngfix” class to all elements which need to support transparency, or add selectors in your CSS file to target your desired elements. Prefixing the selectors with * html ensures that only IE6 will process the rule, preventing more-capable browsers from trying to parse IE AlphaImageLoader idiosyncrasies.

Limitations

This approach will not support repeated background-images – Internet Explorer will stretch the background image to fit. This can still be useful if your background is a solid color and you’re just using transparency for an overlay effect. It will also still be suitable if your background-image is full-width and has no vertical variation (for example, if you’re using a background image to fake columns).

Due to limitations with the AlphaImageLoader functionality, this approach will not work at all for elements which need to have the background image positioned. If that’s behavior you need (and you have to support transparency for IE6), you should consider adding an extra element and positioning that instead.