Fix PNG Alpha Transparency Issue in IE6
Written under How To on Wednesday, 20th June 2007 . Jump to Comments
The one issue that no one pointed out to me was the transparency issue with my logo image in IE6. The logo image was looking a little weird in IE6 browsers. I could not figure out as to why it was happening but a quick Google search and I came across what the problem was and how to resolve it.
Here is how my logo looked in IE6 before the fix.

After the fix

The problem according to many sites is that
The problem is that the most popular browser - Internet Explorer 6- for Windows - does not natively understand Alpha transparency, even though Gecko browsers, KHTML browsers, Opera, Internet Explorer Mac and several minor browsers all do. It displays normal PNGs correctly, and version 4 and up can handle binary transparency if the palette is saved with the image, but as soon as any Alpha transparency is applied, the transparency is replaced with the image’s background colour. This is what Internet Explorer 6- normally shows when a PNG image with alpha transparency is placed over another image.
How did I fix the issue?
Using a simple style sheet hack allowed me to fix the transparency issue for IE6.
<!–[if gte IE 5.5]>
<![if lt IE 7]>
<style type=”text/css”>
#logoimg img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#logoimg { display: inline-block; }
#logoimg { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='<?php bloginfo(’siteurl’); ?>/images/techie-logo-new.png‘); }
</style>
<![endif]>
<![endif]–>
Here is the code I used for my image.
<div id=”logo”>
<h1 id=”logoimg”><a href=”http://techie-buzz.com” title=”Techie Buzz”>
<img src=”http://techie-buzz.com/images/techie-logo-new.png”
alt=”Techie Buzz, know your technology head on” border=”0″ /></a>
<img src=”http://techie-buzz.com/images/spacer.gif”
alt=”spacer” width=”1″ height=”20″ border=”0″></h1>
</div>
In the above CSS code it is checking if the browser version is greater than IE 5.5 and less than IE 7. If the condition is met the style to apply opacity to the images is applied and the image is loaded properly.
In the second section I just gave the h1 tag that is holding my logo image an id that matches the style. So when then browser is IE6 using the style hack above the transparency issue is fixed and the image gets displayed properly.
To get extensive information about this issue you can visit the tutorial on Making Internet Explorer use PNG Alpha transparency.
Have you ever come across such problem? What have you used to solve it? Do let me know through your valuable comments.
Get the latest updates from Techie Buzz directly in your inbox. Subscribe now.












I have been fighting this issue on my blog for nearly 3 months now. Have a look at my logo on the top. It looks especially bad on dark black bg that I have. I have let it alone. Approx 20% of my users are IE6 and see the background instead of the transparency. Now I am going to fix this problem. Thanks for the info…
Hey Trakin,
Glad that this helped to overcome the problem you were facing.
Keith
i’ve tried using the style sheet hack but it doesn’t want to work. i’m using a png image that’s basicly a grey square with 75% transparency and i’m using it as my div’s background-image. any suggestions?
Hi Chris,
I may be able to help you if you let me know the site you are trying this on.
Keith
the site is http://www.gluetest.co.za/hyperauction
The URL is http://www.gluetest.co.za/hyperauction. When entering the page there is a part above the image that should have a transparent background. When you follow one of the links in the top menu the content body, notice that the
min-heightCSS rule isn’t working either. Here is the CSS class that I’m using:.content_body {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale');
width: 750px;
min-height:450px;
padding:15px;
text-align:left;
}
I’ve read that in some examples they use a CSS rule “
background-image:none” and I’ve tried that but it doesn’t work either.I appreciate your help a lot because this site is due tuesday and I’m practically just a newbie.