This is kind of an old problem, but...

Has anyone had to deal with the frustration of working on a site and having a hell of a time trying to figure out what to do about the default alpha transparency rendering in IE6 (or, lack thereof)?

I know there are a few fixes out there but none of them actually offer a solid fix for BOTH of the problems; including PNG's used as background-images.

The well-know fix, aptly named PNGFix, uses a small javascript to invoke the correct filtering in IE6, which is great for images inserted with an <img> tag. BUT, what about background images? There is a newer version of PNGFix (2.0 Alpha) which is claimed to have resolved this issue, but it is very buggy and had unwanted results when I used it.

So, what is the solution? This.

<!--[if lte IE 6]>
<style>
DIV#name-of-div
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
</style>
<!--[endif]-->

DIV#name-of-div <----- name-of-div should be changed to the name of the div containing the background image path/name-of-div-background-file <------ eg. images/background-image-1.png Insert this bit of code into the <> tag and... Prest-o Change-o!

To add multiple background images just apply it multiple times, like so:

<!--[if lte IE 6]>
<style>
DIV#name-of-div1
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
DIV#name-of-div2
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
DIV#name-of-div3
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
</style>
<!--[endif]-->


Enjoy!