Render transparent PNGs in IE!

Posted Tuesday, October 10th 2006

NOTE: This hack only works in Internet Explorer 5.5 and newer. Older browsers will continue to display PNGs incorrectly.

Every single web designer out there has moved on to PNGs for the flexibility they offer. One of the most important features ofPNGs is transparency - it allows a designer to have nice effects on their designs - however, IE never could render PNGs correctly. It doesn’t render their colors correctly to begin with, and transparency is just a myth. This is due to the nature of the IE image rendering engine.

However, there is a workaround. The Windows image rendering engine deals with PNGs and alpha channels much better, and there is a way to force IE to use this engine instead of the one built-in. This is quite a hack, but is very efficient and seems to work without any problems.

There are a few items that are needed. One is the pngbehavior.htc file. You can grab that here.
Save that file in the root of your website. Then, open up your CSS file and add this to it:

img {
behavior: url("pngbehavior.htc");
}

You also need a 1×1 pixel transparent GIF image. One is available here. Upload that to the root of your website as well.

And that’s it. All you have to do now is make sure that you have a width and height attribute set for all your images, because the windows rendering engine does not know how to render images in a browser, and has to be told the actual height and width of an image. The script that forces IE to use the engine does this by reading the width and height attributes.

And presto! Transparent PNGs in Internet Explorer!