How to render transparent png images in IE6 with AlphaImageLoader filter

It’s a well documented fact that IE6 does not render transparent png images properly. You would see a greyish patch in place of the transparent areas .For instance if you had the following div tag

<div id=’layer_with_transparency’>inner html</div>

and its associated style was

#layer_with_transparency
{
background-image:url(‘images/transparent_bg.png’);
}

you’d end up with problems while viewing the page on IE6.

To fix the problem, make use of the AlphaImageLoader Filter http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx from Microsoft.
The css for this filter would be
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='images/transparent_bg.png’, sizingMethod='scale');

To make IE6 alone use this filter, use the underscore format so that the later version of Internet Explorer ignore the filter style specs.
The final css would take the form

#layer_with_transparency
{
background-image:url(‘images/transparent_bg.png’);/* style for IE6 fix */
_background-image:none ; /* remove the above bg image as we are going to use the filter */
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/transparent_bg.png’, sizingMethod='scale'); /* use the filter for transparency support in IE6 */
}