I teach a Multimedia class at Plymouth State University. This week we were discussing the pros and cons on the use of PNGs. I mentioned that Internet Explorer versions 6 and lower fail to render the transparency of a PNG properly, placing white background in the transparency’s place. I also took the time to plug Firefox, mentioning that Firefox does it right!
Well, one of my students, Brendan Emery sent along this fix for PNG transparency in Internet Explorer, thus refuting my biggest con on PNG use! (honestly, I can’t think of any other cons)
[This is] a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. […]
Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.
The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers – in fact it is treated as an HTML comment – thanks to IE’s conditional comments. This solution is therefore light, portable and non-invasive to other browsers.
Comments
17 responses to “PNG Transparency in Internet Explorer”
You got pwned.
Don’t fail me!
These Javascript fixes aren’t exactly ideal – and most solutions only fix img tags, not background pngs.
Bah, wish we could just ignore IE.
…since when did backgrounds need transparency?
It’s not like there’s anything behind a background.
In that case, just convert to a non-transparent PNG.
Also, it’s not all transparent PNGs that are affected – only the ones with alpha transparency. The ones with index transparency (like transparent GIFs) are fine. Which sucks.
TerrorBite:
Background images need transparency when they are applied to elements intended to be viewed on top of (in the z-index) another element, or another background, or whatever. I can think of a million different ways to use that.
Terrorbite, you talk rubbish :) If you have a container dv with a background image, then another over the top – with a transparent png background, you’ll have a nice opaque effect, uncovering slightly what’s beneath (the picture).
Thats why background images could make use of transparency.
As a deisgner I wish that IE could be removed from every computer and replaced with Firefox. How come everyone else even open source handle PNG, but IE can’t find the time to fix it over the last 6 years.
Интересная статья ‘PNG-прозрачность в IE 5.5-6’: http://www.tigir.com/alpha_png.htm
Hi,
Good fix, but how can I change it to support background png’s? I don’t need background-position or repeat-x(y), just
”
experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs
“
A very nice workaround. Thanks a lot
I have this working but the final output is still looking different in IE6. Despite me setting a width and height in the img style it looks bigger in IE6 and doesn’t look as crisp as it does in Firefox/IE7.
Microsoft can go to hell!
I had the same result as Andrew, basically the “fix” could not be used because it distorts images.
Thanks a lot for this workaround!
It doesn’t work for me. I need a transparent background which I set using CSS. Stupid IE.
Thank you so much for this fix. It saved me sooo much time.
@TerrorBite
That’s why no one should hire you. You don’t know sh*t.
The JS your student sent you, does a simple loop on the images that exist on the website and manipulates them adding the CSS properties required to atchive the goal. The JavaScript it self can be disabled! The script is nice if you are short in time, but not professional. Also has other people already sayed, it doesn’t account for background images, nor does it solve CSS background-images (neigher does it go to external CSS files).
At the end of the day, the best solutions is still to add the required CSS manually and test it.
There are two newly discovered aspects of Internet Explorer 6 that allow for transparent images to be displayed without the ugly gray background:
http://cubicspot.blogspot.com/2010/01/transparent-png8-is-solution-to-ie6.html
http://cubicspot.blogspot.com/2010/03/pseudo-transparent-24-bit-png-in.html
I’ve gotten great mileage out of the PNG8 solution on small and low-color images. The second approach is great for faking transparent images on solid backgrounds in IE6. Neither approach relies on hacks. Just plain-ol’ PNG images.