nodecare

background-image: url('/path/to/image.png') !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png');

Pros: That's it - all done. Works in IE6 too.

Cons: AlphaImageLoader can slow down your pages a lot.

Alternative medicine for your IE6/PNG headache

Use Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file. Refer to it in your document (second line of the example code a few bullets down). In another script node, add function calls to DD_belatedPNG.fix(). fix() requires one argument: a text string representing a CSS selector. Here is an example:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
 
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

As of 0.0.3a, you can roll a bunch of CSS selectors into one argument, just like how you'd do a selector group in a

CSS file: fix('.example1, .example2, img');