It’s been a problem for many developers. How do you create a transparent image for Internet Explorer 6 using a PNG. As you are all probably aware IE 6 does not support transparent PNGs but don’t panic there is a solution.

The Solution

This is by no means new; however, I thought it was worth while posting. By using Alpha filters designed specifically for IE we can force Internet Explorer to behave as expected.  As shown using the code laid out below:

The Code

The CSS source is as below.  The first class defines the Alpha filter applied to the containing DIV and also sets a height and width (This has to be the same as the PNGs height and width).

The second class simply hides the original PNG from all versions of Internet Explorer 6 and below.  This is applied as we do not want Internet Explorer to see the PNG twice with the non-transparent version still showing.

.ie-png {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagename.png’,sizingMethod=’scale’);
height: 50px;
width: 257px;
}

.ie-hide{
border:0px solid #FFFFFF;
_display:none;
}

The HTML is also very simple.  Simply add the PNG and wrap it with a containing DIV using the classes as shown below.

<div class=”ie-png”>
<img src=”yourimagename.png” class=”ie-hide” alt=”freshtuts is a life saver” title=”freshtuts.com is full of tutorials for webmasters” />
</div>