Is there a JavaScript PNG fix for IE6 that allows CSS background positioning?

Question

I\'ve seen a few fixes for allowing PNG images to have transparency in Internet Explorer 6, but I\'ve yet to find one that also allows you to set the background position in CSS.

Answer 1

Yes. Convert your images to use indexed pallets (png256). You can support transparency (just like gif), but not an alpha channel.

You can do this using Irfanview and the pngout plugin, pngquant or pngnq.

The YUI performance team also did a great presentation that covers this an many other image optimization concepts.

Answer 2

When the background is static I use TweakPNG to change the Background Color chunk in the PNG to the correct color (instead of the default gray color). Any regular browser will ignore this because the alpha channel overrules it, but IE6 and lower will use that color instead of the alpha channel.

This means we have transparency in IE7+ while degrading nicely in IE6 and lower. And all css positioning and repeating are possible (because there are no hacks!).

Answer 3

DD_belatedPNG.js works very well

Answer 4

You can actually use pure CSS to get positioned background images with alpha transparency in IE6 by taking advantage of IE6's alpha filters and the CSS clip property. Julien Lecomte describes the technique on his blog.

Note that this technique does result in a performance hit for each use of an alpha filter.

Answer 5

This is a new technique that has popped up in the last month or so. From the page:

In this script image tags are supported, both with and without a blank spacer GIF, and background image PNGs may be positioned, as well as repeated, even if they're smaller than the content element they're in.

Answer 6

IE PNG Fix v2.0 has support for full alpha+position/repeat.