png transparency and IE

[bpm125]

Does anyone know if there will ever come a day where IE will recognize transparencies for .png images? It would make like so much easier....

[Centauri]

Transparent pngs are fine with IE7...

[blue-eye-labs]

It works in IE7 but not IE6... how can we get it to work in IE6 properly... I've looked for pngfix scripts but they don't seem to work for me, does anyone know a reliable way? Just something that will fix background png files from external css files that repeat and the like.

[hype]

That day may never come. IE7 supports transparent .png images and Microsoft tries to force-throat this one into the public.

There are some hacks however you should look into.

- One is the AlphaImageLoader hack (just google it) that can be used to make png's transparent. It works, but it's still a hack.

- another hack (the neatest hack) is using an alternative stylesheet for older IE versions. In this stylesheet you can use .gif's, where transperancy IS supported (You could also use png8 if you want to, IE supports transparency for that one. But it's similar to .gif, so you shouldn't bother).
This way, you have neat images in Firefox and IE7, but less neat images in IE6, IE5.. But it's the best you can do.

the page would look like this:
Add the stylesheets in you header.

<link rel="stylesheet" href="default.css" type="text/css"/>
<!-- [if lt IE 7 ] >
<link rel="stylesheet" href="default_ie.css" type="text/css"/>
<! [ endif ] -->

put this in you stylesheets
default.css

.image {
background: url(images/image.png) no-repeat;
}

default_ie.css

.image {
background: url(images/image.gif) no-repeat;
}

Hope that helps you :)

[Centauri]

You CANNOT get the full functionality of transparent png background images in IE6 - the only way IE6 can display transparent png images is via Direct-X's AlphaImageLoader, which places the image on a separate layer, and cannot support background image repeat, position or clipping.

Until the user base of IE6 decreases to a level where it is not worth supporting, the use of transparent png images will be limited.

[blue-eye-labs]

thanks for your help, I think I'll go with the seperate stylesheets, because transparency and repeats are vital to my site.