The easiest way to PNG support in IE6

Posted on April 08, 2007. 63 (comments closed) comments.

&tGo here for everything about this script, including support forums and proper packaging.

This must be the easiest way to get full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds. Credit goes to Angus Turnbull for creating this workaround. My hat is thoroughly tipped.

Here’s what you do
  • First, put this file and this file in your CSS directory. Update: Angus is releasing new versions, so grab the files from his site.
  • Second, paste this code into your CSS file: img { behavior: url(iepngfix.htc); }

Enjoy! Really, that’s it.

Transparent backgrounds

As I said, this can be used to make transparent PNGs work on CSS backgrounds as well. Say you have this code:

#header { background:url(header.png); }

All you have to do is apply the background behavior to the #header element:

img, #header { behavior: url(iepngfix.htc); }

You can do this with every element you’e using PNG-transparency on:

img, #header, .class, blockquote { behavior: url(iepngfix.htc); }

The asterisk also works, but I don’t know what it does to rendering time:

* { behavior: url(iepngfix.htc); }

I found this via the Apple site, which demonstrates some beautiful use of transparency, for example on the Mac Pro site (the tower picture), and the Leopard Spotlight Preview page (the big Spotlight icon).

Here’s all the details from Angus himself.

Tags: css, web
63 comments
  • Sid Jansen says:

    Thanks to Angus article I’ve been using this method for quite a while now. I usually enclose the link to the stylesheet with conditional-comments like this: @import url(htc.css); (This way only IE lower than version 7 gets to see the file.). Also, it seems like the blank.gif isn’t needed when using this method on background-images, making it even simpler. Maybe others can verify this, since I haven’t tested it thouroughly enough to be certain.

  • Olav says:

    Yeah, I’ve never had to use blank.gif either..

  • tamala says:

    Interesting issue that I have. I am using the iepngfix.htc to fix both background and regular images. I am not having an issue with the regular images that I am displaying on my page but the background images disappear when I apply the fix to them… I am using IE 6.0 to view the web page

  • Olav says:

    Hmm, sounds strange, tamala. I suggest you consult the website I’ve linked to.

  • David says:

    This is a great solution, however it doesn’t always work. In certain situations elements with a transparent PNG background can break links and form elements that they contain (I think it’s caused because even though IE renders the background under the elements, (il)logically the image is placed above it).

    Anywho, the solution (that worked for me, anyway) is to make sure that the container with the background is not positioned, and the active elements inside are. See http://www.hrunting.org/csstests/iealpha.html

    There may be a way to automatically add an inner container with this script, but it would be very nontrivial.

    (it would be nice if these comments displayed the date/time too)

  • JsG says:

    Niiice! Its working For me just fine! Thanx homie!

  • Olav says:

    @David: That looks like a great solution.

    (Why would you need dates on comments? I’ve always wondered what good they serve ;)

    JsG: That’s great, but thank Angus. :)

  • Achim says:

    Thanks a lot! This small tut has made my day. Since three hours I’m searching around and trying things over things!

    : )

  • Jim says:

    Forget about IE. Mozilla is the leader

  • says:

    “Forget about IE. Mozilla is the leader”

    Wise words from an ignorant web designer.

  • Nelson Mendes says:

    Very Nice. But will this work on pseudo classes like a:hover?

  • Olav Bjørkøy says:

    @Nelson: I’m not sure, let us know. :)

  • mikael says:

    brilliant solution. has saved me some real heartache. however I have one final problem I cannot solve. background-repeat:repeat-y; for a background png image that is repeated vertically (it’s a collumn). Does not seem to repeat with this fix applied.

  • Jeff says:

    Awesome! Thanks for your help! Saves me from going back to JPGs!!

  • says:

    I have a hard time getting this to work on background images in a table. Does anyone know how this will work?

    Thanks in advance.

  • Olav says:

    To everyone having problems with this, please consult the website linked to at the top of this page. I don’t know much more than what I’ve written before. :)

  • Marius says:

    Hi, Yeah the script work like no other but please try to use it this way: background-image:(myimage.png); background-repeat:repeat; And it will not work :(. and the padding of png is not taken into conssideration. Thank you

  • Sam says:

    You need to change the way listed above. IE7 has other code

  • Mark says:

    I’m not getting any strange behaviors, but it’s not doing anything different from when it’s not on there. Maybe I’m just misspelling something. The site you link to just lists issues, but doesn’t offer solutions.

  • Leo says:

    When i add this to my CSS file and check it through the W3C validator, it says:

    img Property behavior doesn’t exist : url(iepngfix.htc)

    So, i wonder where did this ‘property’ come from and where when and why should it work ?

  • Raoul says:

    Wow, what a dream. The directions here were a little hard to follow but once I figured I was “save-as”-ing in my browser the blank.gif and the chunk of freaky code as two separate doc and just sticking them in the folder with my images, html and css docs it was a breeze. I am SO happy!

  • Robert says:

    Just tried this script and I must say THANKS. You have no idea how much hair you helped me keep.

  • Paul Wood says:

    This code rocks! I am a beginner at css code and still got it to work straight away, have been looking for this solution for a while so most of my hair is gray already, so thanks for saving the rest. one issue i have is that the links on top dont work so am trying another work around YOU DA DADDY.

  • Jonathon VS says:

    One of the previous commenters mentioned something about there being special code for IE7. Actually, PNG alpha transparency works fine in IE7, so you don’t need any special code. If you use conditional comments to import your stylesheet, you can specify that you just want this fix to be applied to IE6 and earlier.

  • Daniel says:

    Very useful, thanks :)

  • Simon says:

    Nothing works for me. Strange and odd. I don’t get it. If IE is the only browser that does not support it they should fix it. Waste of my time.

  • Rene says:

    I just can’t get it to work. I checked the twinhelix site, but I can’t find the solution…

    Perhaps someone sees what’s going wrong?

    http://www.clixz.nl/wippelsdaal

    CSS: http://www.clixz.nl/wippelsdaal/css/wippelsdaal.css

    There is a header, content and footer part. The content part is a small image which is repeating vertically. The header and footer have fixed sizes.

  • Calif says:

    And I thought IE supports PNG…

  • Andre says:

    Thank you for recommending this script. It’s very elegant, and it works!

  • Morley says:

    This page doesn’t appear correctly in IE6. :(

  • kitsch says:

    Strange, but I’m seeing that blue background when I view your page in ie6.

  • co says:

    Thanks, it works well. But how do use in css with x and y coordinates?

    behavior: url(iepngfix.htc); background: url(“images/back.png”) no-repeat -147px 0;

    It goes to x: 0 and y:0

  • co says:

    There is no solution.

    http://www.twinhelix.com/cgi-bin/forum.pl/iepngfix/28

  • Bob says:

    I’ve created a solution for people who have a uniform color background they wanted to “repeat”.

    As mentioned earlier, repeating in any fashion is impossible. However, it is possible to ‘stretch’ the background over the whole area.

    If you’re using a solid translucent color png background, you can stretch it across the whole area.

    To do so, first do the standard css: .trans_white { background-image: url(trans_white.png); background-repeat: repeat; behavior: url(iepngfix.htc); }

    Notice I added in the background-repeat. This is the variable that will indicate to the script to stretch it.

    Now, we modify the script (iepngfix.htc) to look at the repeat: Find this: style.backgroundImage = ‘none’; filt(s, ‘crop’);

    Replace it with this: style.backgroundImage = ‘none’; if(currentStyle.backgroundRepeat==”repeat”) filt(s, ‘scale’); else filt(s, ‘crop’);

    Now, whenever a background has a background-repeat set to ‘repeat’, it’ll stretch the background image to encompass the whole area.

    This can also be done to mimic repeat-x and repeat-y. You just need the div/td/whatever to ONLY encompass the area desired.

    For instance, on my site, I currently have a gradient that’s 20 px wide and 1 high. I want it to encompass a 20px-wide vertical column of adjustable height. First, I created the 20px-wide area and then I did the above procedure.

    It only stretches, but that works for me!

    Thanks to the author of this page.

  • Bob says:

    Oh, if you want to look at my CSS:

    http://bobdevine.com/style.css

    Here is the modifed script:

    http://bobdevine.com/iepngfix.htc

  • Mark says:

    Thanks Bob This is a great addition to an already great solution to the crap IE forces us to work around.

  • Olav says:

    @Bob: Nice work, I bet many will find that helpful. You should enlighten Angus on this, if you haven’t already done so. :)

  • JC says:

    duuuude.. THANKS!!!

    i was pulling out my damn hair!!

    :)

  • Villa says:

    Great job in finding this fix for a very annoying problem. I will try to implement it in a wordpress blog and see if it works.

  • Decipher says:

    Hi Olav,

    I was very curious about this method, so I decided to check this site in Internet Explorer 6 (via a Virtual Machine) to confirm it worked; it didn’t.

    Can anyone else confirm that this does or does not work? It may be that it won’t work in a VM, but I find that hard to believe.

    Cheers, Decipher.

  • Olav says:

    @Decipher: The script works just fine. I might have done something wrong on this particular site, but the script itself is well tested on many larger sites.

    I’ll try to find out what’s wrong with this one. :)

  • Decipher says:

    Hi Olav,

    You are correct, I did some further testing with the script after I made the original post, unfortunately I ran into the problem of positioned and repeating images, but that’s a side point. For what the script is officially able to do itself it’s perfect.

    Cheers, Decipher.

  • Olav says:

    Decipher, take a look at Bob’s comments on this post. Seems like he found a way. :)

  • Christian Gehrke says:

    Wow what a great way to actually be able to use PNG files. I just thought i’d have to wait till everyone switches to a modern browser which could be years from now.

    Bob’s solution is great but I find it works perfect for IE5.5 and 6 but then it does not do the same thing for FF or 7.

    Such is the way of the web for now I guess. ARRRGGGGHHHH!

    Thanks very much to you all.

  • Tomasz Gorski says:

    Brilliant idea. Thanks for very interesting article. btw. I really enjoyed reading all of your articles. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. Greetings

  • Jeremy Mansfield says:

    To contribute to Morley and Kitch’s comments, this site doesn’t even work on IE6!!

    I have not been able to get this fix to work on IE6. What it simply does is show my bad .png file as a flicker, and then it totally disappears … which is fine for me for now to not display at all.

  • Thomas says:

    Great post, very informative, thanks.

  • Bhavesh Nakrani says:

    Hello Angus,

    I have suffred a lot by this problem. and by searching I have got the solution from your site and yes now it is workling. really thanks and I appreciate your work…………………….

  • Beans says:

    I’m working on a personal portfolio and I’ve run into the IE png glitch. I’ve looked around for lots of different png hacks and fixes but can’t seem to find any that actually. I’ve used some of Angus’ stuff before and it always works brilliantly, but for some reason this one doesn’t do anything for me. I view my site on IE6 and all my pngs are still showing up with grayish backgrounds.

    I’ve put both files in my css directory and put in the css code in the style sheet, I can’t figure out why nothing’s happening… I know it doesn’t work on tiling backgrounds, but even just regular png foreground images aren’t working.

    http://www.pinstripepresentations.com/index.php

    Any help would be appreciated.

  • Tobbe says:

    Amazing, it’s working perfectly! Thanks a lot!

  • Dathan Nicholson says:

    Thanks dude, you rock! Just what I needed.

  • Kevin says:

    I have just discovered that this PNG fix does not work under IE 6.0 under WINE.

    My assumption is that WINE does not support ActiveX. I am using the ies4linux package from tatanka.com.br

    I am posting this here because I came close to using the ol’ rifle in the window habit getting this thing working.

    You can check out how we used this solution at our web page.

  • Frederik says:

    There’s an easier fix for IE6 PNG support. see this: http://prog.driversites.dk/?p=4

  • ba-m-bi says:

    Thank you, vely useful.

  • jia says:

    There is a problem when the element’s postion style is absolute, the cursor style doesn’t work.

  • Benn says:

    I get Accses denined for mysite.com/css/pngfix.htc I chmod the file to 777 and all folders on site but still same error. Can someone help Thnx

  • ADB says:

    Try as I might, I could not get this script to work correctly if the css files were in their own directory. But if I put the css in the same directory as the markup it works just fine.

    Thanks to Bob for the ‘stretch’ modification. It’s super awesome.

  • Daniel says:

    Excelent, doesn´t work with GIF files, but who cares, my images look like ghosts :P.

    Thanks for the information.

  • tom says:

    hi doesn’t work on :HOVER :(

  • kyle says:

    Dont work tooo

  • says:

    I noticed you are using png’s and implemented this script on your site, but did you actually CHECK it in IE6? You’ve applied the style to your header and some other elements and every single png is coming up with the light blue background in IE6. Doesn’t look good at all :(

    There is nothing easy about this script, since the things you want to use it for don’t work.

    You go on about it’s praises yet it doesn’t even work for you!

  • Olav says:

    To “” above:

    I have checked this page in IE6, but not recently, so you’re probably right that it’s broken. Thanks, I’ll check it out.

    However, I’ll take Angus’ word, Apple’s word, and the words of all the people that this script has worked for, before that of a person who doesn’t even have the decency to leave his or her name.

  • Olav says:

    I think it’s time to close the comments on this one, since the asshat level is close to critical.

    Please direct all praise and (constructive) criticism to Angus. :)