PNG transparency with IE6

Question

Hello!

I need to overlay two PNG images and see this in IE6.

Simple overlay like:

<div style="position: relative; width: 150px; height: 300px;">
<img src="im1.png" alt="" style="position: absolute; top: 0; left: 0;">
<img src="im2.png" alt="" style="position: absolute; top: 0; left: 0;">
</div>

works only for 256 color images, it doesn't work at all ofr true color images.

Is there any way to overlay true color images in IE6?

Answer 1

The best fix for this that I know of is: http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/

Simply include his CSS on your page:

* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
    );
}

Answer 2

There is a javascript code PngFIX (http://jquery.andreaseberhard.de/pngFix/). This will surely help

Answer 3

Try this, this ie pngfix also supports true color

http://www.twinhelix.com/css/iepngfix/

Answer 4

Yes, it's a well-known IE6 bug that alpha channels don't work. As per the KB article, you have to sniff for IE6 and replace the image with an element using an AlphaImageLoader filter.

The simplest, CSS-only way to do that would be something like:

<div id="wrapper">
    <div id="im1"></div>
    <div id="im2"></div>
</div>

#wrapper { position: relative; }
#im1, #im2 { position: absolute; }
#wrapper, #im1, #im2 { width: 150px; height: 300px; }
#im1 { background-image: url(im1.png); }
#im2 { background-image: url(im2.png); }

/* IE6 opacity hack */
* html #im1 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='im1.png'); }
* html #im2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='im2.png'); }

(This uses the old-school * html CSS hack to target IE6; you might also do it in a separate stylesheet targeted at IE6 using a conditional comment instead, if you want to keep your main stylesheet clean of IE-cruft.)

There are also dozens of JavaScript fix scripts that will do the work automatically for you, replacing on-page images with IE filters when JS is enabled. There are lightweight ones that only replace simple images, and complex ones that attempt to reproduce PNG background tiling and positioning effects, with varying levels of success.

Wiki's PNG page has links to many of them.