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

javascript css internet-explorer-6 png transparency
VirtuosiMedia picture VirtuosiMedia · Sep 17, 2008 · Viewed 7.5k times · Source

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

Prestaul picture Prestaul · Sep 17, 2008

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.

Related questions

How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

Here's the problem. I have an image: <img alt="alttext" src="filename.jpg"/> Note no height or width specified. On certain pages I want to only show a thumbnail. I can't alter the html, so I use the …

Read More
How do I get a floating footer to stick to the bottom of the viewport in IE 6?

I know this would be easy with position:fixed, but unfortanately I'm stuck with supporting IE 6. How can I do this? I would rather use CSS to be clean, but if I have to use Javascript, that's not the end …

Read More
CSS doesn't apply to dynamically created elements in IE 7?

Still looking for an answer. Changing or reassigning to the filter's innerHTML successfully redraws the element, but breaks my script, so that's out. Adding additional child nodes, including text nodes, does not force a redraw. Removing the added node does …

Read More