PNG Transparency in IE 6
Published on September 28th 2008.
Updated on July 30th 2010.
IE6 sucks but...
Despite the release of IE8, IE6 still lingers around, like a horrible cold that won't go away. Given the popularity of IE8, and the fact that IE6 is so damn old, it's up to you whether you want to support it. I don't really anymore. So, for those of you having to code in IE6, here is a tutorial on how to accomplish the very slick CSS transparency, in that horrible browser — we shouldn't have to avoid transparency just because some retro browser doesn't support it! Alright, let's get started.
The PNG filter
Sometimes it's preferable to use a PNG instead of a GIF, as PNGs generally deliver smoother results, rounder edges, etc. You can get the same results with a GIF, but at a higher quality, which means a larger file size, whereas a PNG can give the same results but with a smaller file size. The crux of the problem with PNGs is how IE6 displays them: the section that is supposed to be transparent show up as a light-blue colour. We get round this by using the PNG transparency filter.
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[path to your image]');
The image path, unlike in the CSS properties background and background-image, does not refer to where the image is located from your stylesheet folder, but from the actual page the stylesheet is embedded in.
How to use
Example
CSS Code:
#imageTrans {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yourimage.png');
}
(X)HTML Code:
<div id="imageTrans"></div>
To use the PNG filter you must ensure that your image is displayed via CSS (i.e., using background-image or background) and not an image tag.
Issues
As this is a filter any CSS background properties will no longer work, this includes background positioning and tiling. There is unfortunately no reliable way to get round this. There are also issues with forms placed over PNG filter images not being usable, like there is something covering them, preventing you from clicking in them. Again, no solution for this.
Note — because of the issues with this filter, try not to use it for background images, as it will screw up. Use it for logos or anything that doesn't need to be manipulated with the CSS background property or anything that contains a form.
