Transparency of png files in IE

Question

I have it set up in css to have the background an image slightly bigger than the content section so as to have a shadow behind it that repeats in the y direction but in IE it doesn't show the transparency. I have used google to try to solve this problem with no luck having done the image in css.

CSS:

#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}

HTML:

<div id="shadow">
</div> 

Any help is greatly appreciated as I at a total loss on this.

Answer 1

If it's possible, you make the png a gif, and everyone is happy.

If that isn't possible, the approach I use is the IE only css behavior.

With a behavior you can link to an htc file, like the one found here: http://www.twinhelix.com/css/iepngfix/

You would then have to add CSS like:

behavior: url(iepngfix.htc)

Answer 2

All the above may work, especially the alpha image loader which is good, vut if you plan on using it and want to rely on it in the future then you are better using another technique.

The best I have found is:DD_belatedPNG.js

it works likke a treeat and is very easy to use.

The problem I have with the others is that there are bugs when you want to use links appearing over the top of the bg. They dont work, without further hacks.

Answer 3

A very nice png fix for IE6 can be found here

I used it and can assure u it works.

It is JS though, but most people have it turned on lately

Answer 4

IE7 supports png transparency. You could use something like a browser gate (which is an ugly hack) if you'd like to support IE6.

Use selectors in your CSS which IE<7 doesn't support:

html>body #transparent_png {
    background: url(gfx/transparent_png.png);
    background-repeat: no-repeat;
} 

#transparent_png {
    /* additional properties here */
}

the html>body #transparent_png style is ignored by IE6. Then, we use the ugly DXImageTransform-filter in a seperate .css file to display the png in IE6 transparently. But this css should only be loaded if the ie version is less than 7:

html header:

<!--[if lt IE 7]>
    <style type="text/css" media="screen, projection">
    @import "iefixes.css";  
    </style>
<![endif]-->

The iefixes.css contains something like this :

#transparent_png {
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');

}

Unfortunately, this filter does not support repeat-x or repeat-y. But with this gate hack, you could display an ugly dithered gif shadow for IE 6 instead of the nicer png shadow :).

But, there is also a sizingMethod property for the DXImageTransform-filter (see http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx), so you could scale the image to the size of its container element:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');