Png fix for ie6 using css

Many of the cases we would be like to have a transparent image, which is other wise called png image for our websites. Like if we need an image which is going to place in different backgrounds, we can use a single transparent image inorder to have multiple images. This is done for the purpose of site optimization and performance.

The true color (png24) will be supported by all major browser except ie6. This will automatically create a grey background because ie6 cannot recogonise the alpha filter option. So what we do? Yes we got a simple Css hack to overcome this issue.

Here is the hack
HTML Code
For Example:
<span id="alImg1">
<img border="0" src="images/htw.png"/>
</span>

CSS Code
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }

In the above example i have htw.png. So use the id like how i have specified and call it with in the css.

Note:
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }
In this case also you need to specify the image path.