Play my last.fm radio

What's it like outside?

Web design tutorials

PNG transparency problem in IE6 and below

This is the scourge of many web designers. Life would be so simple if a) Microsoft had seen the problem coming, and b) everyone just used Firefox instead.

The problem

But a large number of people still use Internet Explorer 6, including businesses. If you are serious about web design you can't just ignore the issue altogether. The problem in question is that IE6 and under doesn't support transparency within PNG files. It supports PNGs, but any transparent or semi-transparent pixels are replaced with a nasty grey pixel. For example, if I hadn't battled this problem with this site, the shooting star at the top of my night theme design would look like this:

Nasty. So how is it overcome? There are a few methods:

1. Don't use transparent PNGs if you can help it: no, seriously. Consider if it's essential or whether you could save the image as a non-transparent image, where the backround of the image is the same as the area that you are putting the PNG. You can avoid a lot of need for transparency by doing this.
2. Use GIFs: GIF transparency is supported where PNG transparency isn't. The catch is that you can only have complete transparency or no transparency, i.e. you can't have semi-transparent pixels. The other problem is that GIFs are poor quality image files compared to PNGs or JPEGs.
3. Use the weird Microsoft hack: Microsoft stunned the world with their AlphaImageLoader CSS hack, which allows you to use transparent images as backgrounds of div elements. The CSS property is as follows: CSS filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='path/to/your/image', sizingMethod='scale'); There are a whole load of issues with this, one of them being that it can't apply to repeated backgrounds. Therefore I won't go into any more detail - if you're interested, Google it.
4. Secret option no.4...

Secret option number 4

This is what you've all been waiting for. The best solution I've come across is to use IE PNG Fix, which uses Javascript to force transparency upon all your transparent PNGs. Version 2.0 alpha 3 also supports repeating backgrounds, which is pretty stunning. It is backward compatible to IE 5.5, which is realistically as far back as you need to go. Download and unzip the package, and follow the instructions. You need to place a link to the javascript file in your HTML head, and the following line in your CSS:

You also need to place "blank.gif". Open up "iepngfix.htc" with a text editor, and edit the 16th line down where it mentions "blank.gif" to show the location of the file. Now each transparent PNG on your page should display properly in IE6.

The drawback

You do have to make a sacrifice in using this method, which is in the validation of your CSS. The AlphaImageLoader also has this problem, so that's no better. The validator kicks up a fuss about the property "behavior" not existing, and your CSS fails. This is why I put a big cross at the bottom of my site next to CSS, making the point that I'm more interested in cross-browser support than getting a tick next to my CSS. I think it's worth it.

Get IE PNG Fix

« Back: tutorials

Jon Cairns © 2008