How to Make PNGs Transparent in IE Using CSS
You’ve just made an awesome PNG image with alpha transparency, it looks great in FireFox, but your excitement receives a swift kick in the butt when you test it out in Internet Explorer. Don’t worry, there’s a very easy way to make IE 5.5+ obey your transparency needs. All the guides out there can be really overwhelming, so I’ll make this as quick and painless as possible so you can get on with your day.
First let’s grab the fix by Angus Turnbull and a blank “spacer.gif” image, you’ll need to right click / save as and upload these files somewhere on your web server:
http://www.metatitan.com/files/iepng.htc
http://www.metatitan.com/images/spacer.gif
Open the iepng.htc file and near the top edit the path to spacer.gif to where you uploaded it on your web server. Now add this into your CSS stylesheet and change #yourclass to the class you’re working with, and the URL to where you uploaded it.
Now we can have transparent pngs like so:
This can make backgrounds defined in “#yourclass” transparent as well. You can mess around it, and define the behavior in a different way if that works better for your project, it’s quite flexible and easy to work with.
thanks for summing this up in such simple terms
Comment by suishide — October 20, 2007 @ 1:13 pm
I tried using this to be able to use png’s on my current project. The most notable problem was that when I use a transparent png as background image, all placement and tiling goes out the window. The engineers I work with also say that this fix has caused a lot of mystery bugs in IE. They aren’t really sure how it’s causing them, but as soon as we turn off the png fix, all of the bugs seem to disappear. At this time, we’ve decided to can the idea of using this fix and just go back to using gif’s and jpg’s. I was hoping a fix for this fix would come along, but at this point I’m just hoping folks will stop using IE6 pretty soon - yeah right
Comment by r2witco — October 25, 2007 @ 8:28 pm
This fix doesn’t seem to work on anchor tags ().
It will fix the transparency, but your cursor will change to the regular pointer and your rollover CSS will cease to function. I’m going to try applying the background image/hover functionality to a child span in the anchor tag. Hope that works.
Comment by Bryan — November 5, 2007 @ 5:12 pm