Article published: 28th September 2008.
I know IE8 is round the corner, but, unfortunately, IE6 is still lingering around so it is important to code for it. This is why I'm writing this (my first IE 6 tutorial) on PNG transparency in IE6, as I was surprised by the amount of people who either hadn't heard of the PNG filter or thought it delivered rubbish results. So here you go...
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 the image from where the stylesheet is in the document structure, but from the actual page the stylesheet is embedded in.
<div class="image"></div>
.image {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yourimage.png');
}
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.
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.
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.
Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.
Back to resources.