SteveMcKeogh.co.uk - Web Developer

I'm sure most people are aware of the Javascript hack that will add alpha transparency to any png images on the page within an <img> tag in Internet Explorer 6. This is great, but what about background images? The Javascript hack will not pick those up, so you will have to find another way to do this... fortunately there is a way.

As Internet Explorer 7 has implemented the alpha transparency to png images (at last!) the problem now only occurs in IE6, so you only need to apply this for IE6, that also, is easy to get round.

Here is how to do it, using our example alpha transparent png file alpha.png.

#mydiv{ width:100px;
height:100px;
background:url(alpha.png);
float:left
}

Now the above will work perfectly in all browsers apart from IE6, instead you are likely to see a gray background... or maybe even a black one, either way it will not be partially transparent like we want, so all you need to do is add the below:

/*\*/
* html #mydiv{ background:none;
filter:progid:DXImageTransform.Microsoft
.AlphaImageLoader(src='alpha.png')
} /**/

Firstly, the above style is wrapped with /*\*/ and /**/ and started with a * html. This makes the style only visible in IE6, all other browsers will ignore this (including IE7).

So now that we know only this block can be seen by IE6, we tell it to set the background image to none and apply the special IE only filter to set the alpha.png to be alpha transparent. It is very important that you add the background:none to this style block, otherwise the background that has been set above will just overwrite the filter and you will still see the gray/black background.

As IE6 is still widely used and not taken over by IE7 fully yet, I feel it's very important not to forget these users, and to continue testing your site's in IE6... I know I do!

Also I feel it's worth me pointing out, I am completely aware of the opacity:.5 and filter:alpha(opacity=50) styles, these work in all browsers, but this is only good for flat colours.