WordPress: Fixing PNG transparency issues in IE

I’m using [WordPress][1]to blog this. I usually prefer to use PNG images over GIF for their ability to have variable alpha-channel transparency that makes them look good over any background.
PNGs are a much greater improvement over the old GIF’s single-colour transparency mask.

The issue is that while 8-bit PNG are similar to GIF images and display well in Internet Explorer 5.5 and 6, full-colour PNG with transparency do not: they are drawn with an opaque grey or coloured background where they should be transparent.

This has been a major pain for web designers trying to make their site look nice and a lot of hacks have been invented to get around the problem.

Note: Before implementing the solution described here, have a look at the references added on 31AUG2008 to the bottom of the article as they may offer more modern alternatives.
If they don’t work for you, then use the one described below.

###A solution###

The one I like best is using [DHTM Behaviors][2], a Microsoft-only CSS extension that allows a programmer to extend the IE’s capabilities using JavaScript.

The behavior is loaded using a directive in your normal style sheet. Since it’s an IE-specific extension, it’s safely ignored by all other browsers. Similarly, you don’t need to change your HTML at all.
All that’s required is that you download a 1×1 pixel blank GIF image, the PNGbehavior script and add a couple of lines to the style sheet used in your site.

I’ve described [a specific implementation for PmWiki][3] before, this one is targeted to WordPress users.

* Get the [blank.gif][6] and [pngbehavior.htc][7] files and save them in your
WordPress’ `/wp-content/themes/` folder.
* Modify your theme’s stylesheet (for the _default_ WordPress theme, it’s in
`/wp-content/themes/default/style.css`) by adding the following anywhere in its file:
~~~~
/* Fix for PNG alpha channel display in IE6 */
img {
behavior: url(“/wp-content/themes/pngbehavior.htc”);
}
~~~~

That’s all!

If you’re saving the behavior file or the blank GIF in another location, you will have to change the paths in the pngbehavior.htc file.

Make sure that the PNG images in your pages have their proper `width` and `height` set, otherwise if these attributes are missing from the `` tag the images will appear as single pixel dots in Internet Explorer.

Note that I’ve modified the behavior file to make sure it can be used with the excellent [LightBox JS 2.0][4] image display overlay script.

The original PNG hack comes from the impressive [WebFX][5] website.

###Resources###
*
*
*

###Modification on 30NOV2006###
Corrected the pngbehavior script to only work in IE5.5 and IE6 as IE7 now correctly displays transparent PNG images.

###Modification on 17FEB2007###
Another reference to a slightly different implementation:

###Modification on 31AUG2008###
A few of more comprehensive references:

*
*
*
*

[1]: http://wordpress.org/
[2]: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/overview.asp
[3]: http://etc.nkadesign.com/Programming/PmWikiCSS
[4]: http://www.huddletogether.com/projects/lightbox2/
[5]: http://webfx.eae.net/
[6]: /wp-content/themes/blank.gif
[7]: /wp-content/themes/pngbehavior.htc