PNG Support in IE6

by Simon. Average Reading Time: about a minute.

Internet Explorer 6 is notoriously rubbish at supporting PNG transparency resulting in images that appear with a grey background; not very useful. All is not lost. Angus Turnbull has created a work around for this issue. You can get all the information needed at this link http://www.twinhelix.com/css/iepngfix/, including support forums. This is possibly the easiest way to get full PNG transparency and importantly the technique works for CSS backgrounds, albeit when no used with the no-repeat attribute.

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

To download this permanently: iepngfix.zip (15kb).

How to Implement

  1. Put the iepngfix.htc file into your CSS directory
  2. Put the blank.gif file into your CSS directory (otherwise you will need to edit the HTC file)
  3. Edit your CSS to include the following line behavior:url(iepngfix.htc); for the tag

Known Issues

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).

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.


An alternative source that I recently discovered is found at the following link http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

This article has been tagged

, , , , , , , , , , , , , , ,

Other articles I recommend

How to Configure Apache to GZip Your Components

Compressing your Web components will help speed up your Website. The majority of your visitors will benefit as most all Web browsers support GZip compression. You’ll want to compress all text, which includes HTML, CSS, JavaScript, XML, JSON, etc.

How to Set an Expires Header in Apache

Setting an Expires (or Cache-Control) header in Apache will help speed up your website. I’m running Apache 2.x, and define an expires header for all of the site’s static assets (images, stylesheets, and scripts).

Rich Accessible Typography – FIR and sIFR

Many people who have worked on websites know that standard HTML and CSS allows the webpage author to assign any font of their choosing to a text element on a page. However, they also know that there is no guarantee that the element will show the desired font, as the browsing user may not have the same font, or set of fonts, installed on their local system. More often than not, only a set of “common” fonts are installed, for example Arial on the PC and Helvetica on the Mac. This has been a significant issue which has been addressed by two methods: the Fahrner Image Replacement (FIR) method and the Scalable Inman Flash Replacement (sIFR) method.

  • Nice and easy fix, thanks. Remember to ensure images have appropriate width and height attributes set otherwise you’ll find png’s resized.