View Full Version : transparent PNGs in ie6

Jul 6th, 2010, 08:20 PM
Hi All,

I wonder if someone can help.

the transparent pngs are not working in my site when viewed in ie6. I am using a jQuery plugin and I notice that the plugin uses different pngs in ie6 via an ie6 stylesheet. I also have an ie6 stylesheet, I just need the right pngs :-) How have they created their pngs?

my site http://www.cranihum.com

plugin from this site http://spritely.net/

(you will notice I have some other layout problems in ie6, but I am trying to resolve them myself by looking at http://www.positioniseverything.net/explorer.html)

However I couldn't find a good answer with the pngs

Thank you


Jul 6th, 2010, 10:11 PM
Transparent PNGs just simply aren't supported in IE6--it's an archaic browser. Unless IE6 support is an explicit design requirement, I wouldn't worry about it. If it is important, you will probably just have to create images where the "transparent" parts match the color of the background on which they will be placed.

Jul 7th, 2010, 01:32 AM
Thank you for your reply, that's what I thought at first but http://spritely.net/ works in ie6 with transparent backgrounds.

It has a special stylesheet:


which contains some code linking to a png created for ie6.

#bird {
background-image: url(/images/ie6-bird-forward-back.png);


How have they got this to work?



Jul 7th, 2010, 02:14 AM
Using the power of javascript and some hacky coding. You technically can get png transparency to work in IE6, its just a hassle, a pain, and doesn't always work. Just googling "png transparency in ie6" gives me more results then I could use.

Jul 7th, 2010, 02:29 AM
yeah, I will look a bit further, most talk about using proprietary filter called the AlphaImageLoader
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

I notice that spritely.net does not use that exclusively, in fact the moving elements, the sprites, do not use it. I will investigate further how they work.

Thank you for your reply


Jul 7th, 2010, 11:42 AM
Look into supersleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6) – also available as jQuery plugin.

However, transparent PNGs can’t effectively be used as sprites in IE6 since the filter method it is using always applies the entire image to the element without the option to position it explicitly (will always be at top left).