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. If you use sprites, it's a deal-breaker. I've resorted to using GIF's (which are not as high quality), not using transparent images at all, or serving a completely different stylesheet to IE6. Is there a fix for IE6 that allows for PNG transparencies AND background positioning?

Answer 1

check this

Answer 2

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 3

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

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 6

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

Answer 7

DD_belatedPNG.js works very well

Answer 8

Here is more on DD_belataedPNG http://blog.tgrayimages.com/ie6-png-transparency-with-background-positioning-and-repeating/

Answer 9

http://www.dillerdesign.com/experiment/DD_belatedPNG/ This is the way to go!! Easy to implement and it works!