Web Hosting Talk







View Full Version : IE6 Background PNG images with CSS?


Chris`
10-22-2007, 07:49 PM
I've been searching for a few hours, and I can't find anything that actually works. I need to have the ability to use a PNG image as a background repeating which is semi transparent and working in IE6. So far I have found a few scripts and they just show errors when browsing the page. I need something that would work globally to all the png images on the page. Some kind of css code or something I can apply to the images that would force the browser to load them properly.

If anyone has seen this done and knows how to do it please let me know as soon as possible. I'm in a bit of a rush to get this design done but it's totally not working in the IE6 browser.

:confused:

Jay August
10-22-2007, 08:21 PM
Very easy: You can't repeat a transparant png in IE6, not with any hack at all. Sorry!

Chris`
10-22-2007, 08:23 PM
It's been done I've seen it.

Chris`
10-22-2007, 08:25 PM
See for yourself: http://www.daltonlp.com/view/217

Jay August
10-22-2007, 08:33 PM
See for yourself: http://www.daltonlp.com/view/217

Read for yourself :)


Background PNG images can't be tiled. This is a limitation of the IE filter.


It can't be done. This site http://www.daltonlp.com/view/217 leads to this site http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ which leads to this site http://www.twinhelix.com/css/iepngfix/demo/ which clearly states it can't be tiled, or repeated because of a limitation in the IE AlphaLoader filter. Trust me, been searching my butt of for this, but it usually requires a change in your slicing process instead of a repeating background image.

foobic
10-22-2007, 09:03 PM
Fudge your gorgeous semi-transparent png into a gif with a grid pattern of transparent pixels and use that selectively for the background where IE <= 6.

It's a degraded experience for users of IE6 and below but they deserve it. ;)

stripeyteapot
10-26-2007, 09:28 PM
Chris, this page; http://www.hrunting.org/csstests/iealpha.html seems to work quite well and tiles a 40x40px image - Worked for me in Ie6 on WinXP SP2.

The trick seems to be not declaring a position attribute for the container div. Give it a whirl, it worked for me in Ie6 on XP SP2.

Chris`
10-27-2007, 07:46 AM
Thanks for the guys that helped. And anyone who thinks it can't be done. I'm set out to prove you all wrong. Just wait and see. I've managed to get all my images working except the background ones. I've just got some javascript confliction. I think if I tweak the css a little I might not need to use the broken javascript.

ennio
10-27-2007, 06:55 PM
With transparent background PNG img you can use: crop, image and scale.