Peter Törnstrand

Using transparent PNG background images is pretty standard these days with shadows and fading backgrounds on almost every site. PNG backgrounds even works with IE6 although it’s implementation is kind of buggy. In order to use it on IE6 you have to use the IE6 filter rule, as shown below.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background.png',sizingMethod='scale');

This isn’t a problem for you can stick this piece of CSS code in a separate CSS file and use the IE conditional syntax to only make this code visible to IE6.

Ok, on to the problem then. If you want to use a PNG background image larger then 1 pixel in height and have a regular link on top of that background your in for some trouble. For some reason, if your background image is larger then 1 pixel in height, IE6 wont accept links on top of PNG backgrounds.

However, after much grief and searching the net I found a solution for the problem. It turns out that you can actually have links on top of PNG backgrounds if the background under the link is completly transparent. Look at the pictures below.

This is how the page looks rendered in a browser.

This is the PNG background image that allows me to use links on top of it. Notice how the area where the links are suppose to be is completly transparent.

If I’ve been using this image the links would not have worked on IE6.

Important update
It seems you can actually use this kind of background images if you set the children of the container with the background image to position: relative. For example, say a UL tag had the above image set as it’s background image. If I then set the UL’s children, the LI’s, to position: relative any links they contain would be clickable in IE6.