Table of Content

technology01.png
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

Last modified: Sunday, 18 April 2021

Author

Comments

Hi, your post was just what I was looking for. Thanks a lot!

BIG THANK YOU! I had been struggling on and off for days with getting a transparent png fix for IE6 to work. I couldn’t get it to work until I read your page. It is particularly relevant for people who use WordPress. Thanks again!

Thanks so much for that! This has saved me a lot of work. Hopefully in the next few years the rest of the world upgrade to more modern browsers – Safari, Firefox, IE7 (in that order). But for now this work around is great!

Hi. Thanks for writing and developing this. I’ve used png IE fixes before with flat HTML sites, works great, but I just can’t seem to get WordPress to accept the fixes. I hoped this was the answer but I just can’t get this to work either. Followed and didn’t change your instructions. My only thought is perhaps because haven’t got WordPress installed in the URL root? It’s a dev site hosted a few levels deep. Any ideas? Thanks again.

Hi Andy, It’s true that I have supposed that WordPress was installed at the root of the website, so in your case, my guess is that you probably have a path issue. One thing I do not mention in the article is that you may also have to edit the path to the blank.gif inside the pngbehavior.htc file; you will probably want to update line 29 : var blankSrc = "/wp-content/themes/blank.gif"; to whatever path to blank.gif. Let me know if it worked.

I’ve followed the instructions outlined in your article, but I can’t get it to work in ie6. I’m using WordPress 2.2 and K2

I simplified the process and created a simple plugin that should work out of the box. You can find it here: http://www.mukei.org/8/ie-png-transparency-fix It’s the same fix this article is describing except that it automatically adds the necessary HTML code to any template that will be used. No need to modify individual templates.

This is nice- It saves my day.

Niall Ridge 

Flipping awesome! I found the pngbehaviour script but wasn’t sure where it had to live for wordpress. Thanks!

Shouldn’t we use conditional comments here ? Css here or Css Here Otherwise it would just overload browsers who does not really need that fix .

To Krembo99: it may be a good solution to put the CSS trick in the HTML header directly between these conditional comments. Whichever way you do it wouldn’t matter much in term of performance: Behaviors are a IE-only extension and are totally ignored by other browsers. Just use the way that makes most sense to you and your site structure. There have been some improvements made to the PNG behavior I use and I’ll post the detail soon.

A big thanks to you for making this particular modification.. really appreciate it …

Thanks to you I will be able not to give the best in the graphic design of my web site 😛

Hi! Wemaster, Can the technique that you have explained here be used for commercial websites free of cost. Is pngbehavior.htc file available free of cost for commercial projects. Please reply.

@Deredanger: please see the pngbehavior license located at: http://webfx.eae.net/license.html You may want to check out the other references to similar implementations given at the end of this article to find one that is suitable for you.

This is a great fix, I didn’t change the pngbehavior.htc file last time and had issues but now it works like a charm.

I am going crazy over this png thing… I have tried several methods, including this one, and none seem to work. It is a png in the header of the blog. Does the fact that it’s in the header make this work-around useless?

wow.. thanks for this info. I’ve looking for this fix around the web. regards again.

Dang now I know how to fix this issue. Thanks!

What a nice blog! I would really appreciate the topic of the article that is very informative and attention-grabbing. I read two or three articles from this blog and found them awesome.

Comments are closed.