WordPress: Fixing PNG transparency issues in IE

Tuesday, May 30, 2006

technology01.png I’m using WordPressto 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, 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 before, this one is targeted to WordPress users.

  • Get the blank.gif and pngbehavior.htc 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 <img> 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 image display overlay script.

The original PNG hack comes from the impressive WebFX 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: http://homepage.ntlworld.com/bobosola/index.htm

Modification on 31AUG2008

A few of more comprehensive references:

Entry Filed under  :  Web Design

24 Comments Add your own

  • 1. Herbert Spencer  |  July 14th, 2006 at 12:44 am

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

  • 2. Vikingprincess  |  November 23rd, 2006 at 8:29 pm

    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!

  • 3. Samuel Clarke  |  February 5th, 2007 at 6:03 am

    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!

  • 4. Andy  |  May 31st, 2007 at 3:30 am

    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.

  • 5. Renaud  |  May 31st, 2007 at 8:03 am

    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.

  • 6. Razn8  |  September 13th, 2007 at 10:13 am

    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

  • 7. Kevin  |  September 27th, 2007 at 3:39 am

    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.

  • 8. Mark Abucayon  |  December 9th, 2007 at 1:56 pm

    This is nice- It saves my day.

  • 9. Niall Ridge  |  February 20th, 2008 at 5:09 pm

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

  • 10. Krembo99  |  May 13th, 2008 at 3:34 pm

    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 .

  • 11. Renaud  |  May 13th, 2008 at 5:21 pm

    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.

  • 12. Niyaz  |  July 22nd, 2008 at 10:40 pm

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

  • 13. pethidne  |  August 29th, 2008 at 7:05 pm

    Thanks a lot

  • 14. pethidne » Blog Arc&hellip  |  August 29th, 2008 at 7:24 pm

    [...] 原文地址:http://blog.nkadesign.com/2006/wordpress-fixing-png-transparency-issues-in-ie/#comment-9023 Filed Under (未分类) by admin Read more [...]

  • 15. Srecko Bradic  |  November 7th, 2008 at 5:49 pm

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

  • 16. Daredanger  |  December 6th, 2008 at 3:25 am

    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.

  • 17. Renaud  |  December 6th, 2008 at 10:25 am

    @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.

  • 18. Jeff @ Business Phone Systems  |  January 10th, 2009 at 3:04 am

    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.

  • 19. Babel  |  January 31st, 2009 at 12:11 am

    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?

  • 20. links for 2010-01-22 | di&hellip  |  January 23rd, 2010 at 6:26 am

    [...] WordPress: Fixing PNG transparency issues in IE | Cypris' lookout (tags: png wordpress transparency ie ie6 image smashing in) Share and Enjoy: [...]

  • 21. biber hapi  |  July 28th, 2010 at 8:47 pm

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

    regards again.

  • 22. Shennan T.  |  August 18th, 2010 at 1:35 am

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

  • 23. xenuplda  |  July 4th, 2012 at 1:44 pm

    adskws

  • 24. Australian web design services  |  June 17th, 2013 at 3:41 pm

    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.

Leave a Comment

(Will not be shown)
Notify me of follow-up comments via e-mail

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed


about

Renaud This is a simple technical weblog where I dump thoughts and experiences from my computer-related world.
It is mostly focused on software development but I also have wider interests and dabble in architecture, business and system administration.
More About me…

My StackOverflow Profile
My (sporadically active) StackOVerflow account

Most Recent Posts

Categories

Links