Demo:

REGULAR IMAGE TAG

Opacity demo

BACKGROUND IMAGE

GIF | PNG 1 | PNG 2 | None
Background Position | Height

IMAGE DROPSHADOW

(PNG background behind GIF/JPEG)

Helix

INLINE LINK

Here's some inline link text,
with a background image.

INPUT TYPE=IMAGE

CLASSNAME CHANGE

Self-test debugging:

Click here to test.

What is this?

This is a IE5.5+ "behavior" that automatically adds near-native PNG support to MSIE 5.5 and 6.0 without any changes to the HTML document itself. Supported features include:

How To Use

Follow these simple steps to add this to your page:

  1. Copy and paste iepngfix.htc and blank.gif into your website folder.
  2. Copy and paste this into your website's CSS or HTML:
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    </style>
    That CSS selector must include the tags/elements on which you want PNG support -- basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:
    <style type="text/css">
    img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
    </style>
  3. If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:
    IEPNGFix.blankImg = '/images/blank.gif';
    Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!
  4. If you want support for CSS1 background-repeat and background-position, make sure you include the add-on .JS file in your <head>:
    <script type="text/javascript" src="iepngfix_tilebg.js"></script>
    Otherwise, background images will work but won't repeat or position.
  5. Sit back and enjoy! Perhaps consider making a donation to support this script's development if you like what you see, as I have spent hundreds of hours developing, testing and supporting it :). Alternatively, I would certainly appreciate a crediting link on your site back to mine!

If you are interested in more details or an alternative activation method for the script that maintains CSS validation compatibility, see the source code to this demonstration file.

How to fix common problems

I've pasted in the CSS but my PNGs aren't transparent!
Make sure you remember that the path to the HTC file is relative to the HTML file, not the CSS file (like CSS background images are). If you want to test the path, insert this: alert('This works!'); into the .HTC file.
It works offline but not online.
First try unzipping this default demonstration and uploading to your web server as-is. If it doesn't work, you may have a MIME type problem. You must ensure your server is sending the correct MIME type of "text/x-component" for .HTC files. Try one of these two easy fixes:
  1. Upload the ".htaccess" file from within this script's download ZIP to your webserver, which will make Apache send the correct MIME type.
  2. Instead of calling "IEPNGFIX.HTC" from your CSS, upload IEPNGFIX.PHP to the same folder and call that instead, which also sends the right MIME type.
My PNGs are transparent but have a funny border or red "X" icon.
Check that the blankImg variable is set correctly in the .HTC file, again this should be relative to the HTML document containing the PNGs.
Images are distorted, or this script breaks my page layout.
When applied to images without set dimensions, this script will try and "guess" the correct image size and apply that. If it gets it wrong, give your images a definite width and height. Also, in IE6 using margins can often be more reliable than padding (and putting them on parent elements even more so).
Links or form elements within a PNG'd element are "unclickable".
Due to an IE bug, elements within a PNG'd element that is absolutely or relatively positioned will be unclickable and the script will popup a warning. For more into, see this excellent article on PNG filters and links. The simplest fix is to make sure you have the background tiling JS file included in the page which will work around the issue.
It works, but breaks another application like Google Maps on my page.
You'll need to stop applying this behavior to the third-party element that presumably contains its own PNG fix. Try making your CSS selector more specific, or put a manual override for the element in your CSS like so: * html div#map img { behavior: none; }
I have IE6 installed "alongside" IE7+, and this script fails.
Either try on a computer with IE6 installed system-wide, or make sure that you copy the required DLLs into your IE6 folder. You will need dxtrans.dll and dxtmsft.dll for filter support, try Googling for them or finding them on your Windows install CD. They must also be the "version 6" DLLs, not v7+, to work with IE6. You may also want to try virtualising an older Windows, Microsoft gives away some time-limited virtual PC images if you don't have an install CD.
I have lots of images and page loading is slow.
With a lot of images, it can certainly slow down your page! Make sure that you apply the script as narrowly as possible. Consider applying only to elements of a particular CLASS perhaps, rather than all tags. Also, make sure that you are not trying to tile a 1x1px PNG background over a large element, as this will bring the browser to its kness -- make your images a little larger if you run into this :).
The browser is making hundreds of extra HTTP requests.
See this MSDN HTC bug report for the details and a workaround. The same technique might prove handy with the BLANK.GIF file too if that's your problem.
The MIME type and path are right, but the core script won't load online.
Check that your server isn't sending the HTC file GZIP-compressed. This can break IE6, it seems.
I use jQuery on the page, and this script won't load.
jQuery versions from 1.3 onwards cause a conflict with this script so that this behaviour will not even load or run. The solution is to make sure that the HTC file is included in the page after jQuery.
I want to use A:HOVER to swap PNGs on mouseover, but it doesn't work.
Hover is badly broken in IE6 and this script doesn't support it out of the box on links. If you want this functionality, try the excellent Whatever:hover script which can enable :hover PNG background changes on all page elements. Alternatively, try swapping a className on mouseover like in the demo above.
When I right-click-save-as the PNG image, it saves BLANK.GIF
This is by design. It may be a feature not a bug for some people ;).
I am generating PNGs from a CGI script and they're not transparent.
The script detects the ".png" extension in image URLs. Try adding a dummy image name parameter to your CGI script with that extension in it.
There is a short delay as the page loads before PNGs are transparent.
I've tried to minimise this but it's somewhat unavoidable!
It still won't go.
Try running the self-test at the bottom of the list of demo images. If that throws any errors, you'll know where to start fixing!

License:

IE5.5+ PNG Alpha Fix

(c) 2004-2010 Angus Turnbull http://www.twinhelix.com

This is licensed under the GNU LGPL, version 2.1 or later.

If you want to link my site or make a donation, you're more than welcome :).

Tech Specs

IE5.5+ includes support for a DirectX AlphaImageLoader filter, that can take an element on the page and insert a correctly-rendered PNG image inbetween the element's content and background. This script automatically scans all IMG SRCs and element backgroundImages for .PNG files, and if it finds them, it removes the regular image and substitutes this filter in place. See the source if you want, but I've coded it quite compactly to keep download time down to a minimum (at the expense of comprehensibility, sorry!).

Changelog