The best .PNG transparancy fix for IE windows

Ahh the .PNG. With it’s vast transparency support. Oh how I love you. It opens up a whole new world of web designing possibilities….with only one known enemy….Internet Explorer when run on Windows.

Here’s the deal. Since IE and Windows are the devil, they dont have full transparency support. So what do we do? Ignore the glorious world of the .PNG? Hell no!! We find a way around the failings of IE, as we so often have to do with css anyway. I searched high and low and found many different fixes, tried them all, and now I’m sharing the simpliest, most effective one with you here. The author is Erik Arvidsson, and the nitty gritty details of this hack can be found HERE as well as all the files you will need for it. I will explain how to use it in laymen’s terms here.

First, take the file named pngbehavior.htc and put it in the root directory of your site.
pngbehavior

  * PNG Behavior
*
* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
* for WebFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-??    First working version
* Updated: 2002-03-28    Fixed issue when starting with a non png image and
*                      switching between non png images
*          2003-01-06    Fixed RegExp to correctly work with IE 5.0x
*          2004-05-09  When printing revert to original
*
*/
 
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
 
var realSrc;
var blanksrc="blank.gif" ;
var isPrinting = false;
 
if (supported) fixImage();
 
function propertyChanged() {
if (!supported || isPrinting) return;
 
var pName = event.propertyName;
if (pName != "src" return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
 
function fixImage() {
// get src
var src = element.src;
 
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
 
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
 
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progidXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale'";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
 
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
 
function afterPrint() {
isPrinting = false;
fixImage();
}


Next, upload the blank.gif image to the same place, then all you have to do is add this small snippet of code to each page the .PNG image will appear on (if you have a header include you can put it there)…


 
<style type="text/css">img { behavior: url("pngbehavior.htc"; }
 
</style>

Easy as pie!!!

Now you can do all sorts of cool varying transparency anti-aliased images on any color backgrounds, on any patterned backgrounds, etc. The possibilities are endless. Check out just one example HERE …drag your browser window, resizing it, to see how the background image flows smooth behind all those curves and the handsome drop shadow. You can’t get that effect with a gif, suckas!

Without the hack, that image would appear as if its been highlighted in IE on Windows:

SO not cool.