Transparent PNG Fix for IE 5.5 & 6

IE PNG Fix v1.0 RC4

You know that one browser that has only a vague association with modern web standards? Yeah, Internet Explorer. Wouldn't it be great if it supported stuff like translucent PNGs?
Well, now you can add decent PNG support to IE5.5+ on Windows with no changes to your website HTML source code. This script will add near-native PNG support with full alpha opacity, with only one line in your CSS file, that applies to all < img > tags and also background images!

Script License Agreement

IE5.5+ PNG Alpha Fix v1.0RC4
(c) 2004-2008 Angus Turnbull http://www.twinhelix.com
This is licensed under the GNU LGPL, version 2.1 or later.

Download

If you want, you can view an online demonstration.
To download this permanently: iepngfix.zip (15kb).
Preview Release: Download the latest development code (v1.0 RC5 Preview 5, updated 26 January 2008) at the Test Area.

Compatibility

This uses CSS "behaviors", a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don't include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

Archived Versions

This is the first public release of this script.

CSS PNG Image Fix for IE

CSS PNG Image Fix for IE. A modified CSS snippet to automagically replace PNG images with their AlphaImageLoader equivalent in IE6.

PNG & CSS

Goal: alpha transparent PNG backgrounds for Mozilla, Opera, etc. and alternative content (i.e. not-transparent-but-also-nice backgrounds) for IE6, who doesn't like alpha transparency. All this accomplished by a small CSS trick.
Before we start: this text is written inside a div which is called, er, text.
First, I've assigned a background-image to #text meant for display in
IE6:

#text {
background-image: url(iebackground1.png);
}

Then, I made use of a CSS2 selector that IE6 doesn't understand for giving different style instructions to alpha transparency aware browsers, such as :Mozilla, Opera7,etc.::

body>div#text {
background-image: url(alpha1.png);
}

That's it! The most obvious difference is that, in IE6, the background of the div moves up and down when you scroll. In Mozilla & friends however, the div's background feels more like a sort of filter applied on the Squidfinger wallpaper - which is the way alpha transparency should look like.


Also watch the sidebar's background, by the way. Same effect applied there, but with a green (transparent) PNG. And then, some random content, to make you scroll and enjoy the transparency effects even more: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed scelerisque, pede ut vestibulum pretium, dolor purus lacinia libero, non dapibus nisl nisl pellentesque velit. Aliquam sem quam, vestibulum non, ornare ac, eleifend vitae, est. Pellentesque felis. Nulla accumsan ipsum sed enim. Praesent sed enim. Vestibulum urna ligula, volutpat eget, malesuada at, pharetra sed, quam. Morbi a urna vitae orci faucibus tempor. Nam fringilla laoreet enim. Nunc dignissim, arcu ac commodo sagittis, erat enim mattis diam, et porta pede quam at pede. Aliquam erat volutpat. Sed eget leo ut magna cursus sollicitudin. Maecenas facilisis arcu. Aenean felis. Nam placerat sagittis est. Pellentesque tortor sem, mollis id, posuere eu, tincidunt a, nulla. Duis nec elit. Fusce rhoncus, nibh vitae pretium blandit, turpis erat gravida elit, vitae porta est nulla id wisi. Nam sit amet diam vitae ante facilisis laoreet. Curabitur eros risus, bibendum vitae, ullamcorper vestibulum, aliquet ac, ipsum.