So you're creating a great looking website and embracing the latest techniques like transparent PNG images to get good looking effects. Everything looks great in IE7 and Firefox but then you fire it up in IE6. Oh no!! What are all these gray backgrounds in my transparent PNGs? Well IE6 doesn't support transparent PNGs as simply as other browsers but it does support them with a little tweaking.

You can make IE6 render transparent PNGs just fine using the a combination of two of IE's proprietary features: DirectX Filters and DHTML Behaviors. Filters allow IE to apply all types of visual effects to HTML, pretty pointless usually when creating "standards" compliant websites but one filter in particular is useful in our situation; AlphaImageLoader. This filter will load an image, including a transparent PNG, into the element between the background and the content and even resize the element to fit the image in (there are other options to clip the image but we want the default behaviour). Great, now all we need is a way to do this easily for any PNG image in our site, and only in IE6. That's where DHTML Behaviors come in.

A behavior is basically a javascript file that encapsulates DHTML manipulating code so that it can be re-used. You can attach to any event on the element the behavior is applied to and run the script when the event is fired. The really good bit is that DHTML Behaviors are applied by CSS rules so we can include them in our standard site stylesheet. Perfect!

Create a blank transparent GIF image 16 x 16 pixels in size and call it blank.gif and place it in the Images folder of your website.

Then create a file in your website called PNGImage.htc and paste the following code into it (or get it from the link at end of this post):

<public:attach onevent="RenderPNG();" event="oncontentready">

<script language="javascript" type="text/javascript">
    function RenderPNG()
    {
        var img = element;
        var src;
        
        // check that behavior hasn't already been applied
        if (img.tagName.toLowerCase() == "img" &&
            img.style.filter.indexOf("AlphaImageLoader") < 0 &&
            img.src.toLowerCase().indexOf(".png") > 0)
        {
            src = img.src;
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + src + "\')";
            img.src = "Images/blank.gif";
        }        
    }
</script>

This behavior will be attached to our IMG tags. As you can see the behavior attaches to the element's oncontentready event. When the event is raised once the element is ready for scripting, the behavior check's to see if it has already been applied to this element, and if not, applies the filter and sets the element's src property to a transparent gif file. This way the IMG tag still contains a vaild image so will honour its normal rendering duties but now has the transparent PNG image loaded into it behind the transparent GIF.

Now, in your site's stylesheet file add this class descriptor:

IMG.PNGImage
{
    _behavior: url('PNGImage.htc'); /* IE6 Only */
}

This will cause the behavior to be loaded for any IMG tag with its class set to include PNGImage. The underscore at the beginning of the behavior property makes it invisible to IE7 which ignores CSS properties prefixed with underscores, as will all other browsers. Make sure the path to the .htc file is relative to the page the class is applied to, not the CSS file itself which is usually the case for urls in stylesheets, such as for loading background images.

Now in your HTML assign the PNGImage class to any IMG tag with a PNG file:

<img alt="A transparent icon" src="Images/my-icon.png" class="PNGImage" />

And that's it! If you wanted to, you could attach the behavior directly to the IMG element via an element descriptor in your stylesheet, saving you adding the class to each IMG tag, but this will obviously result in a few more CPU cycles being chewed up on the client in IE6 when loading pages:

IMG
{
    _behavior: url('PNGImage.htc'); /* IE6 Only */
}

Files:

• PNGImage.htc
• blank.gif