Displaying alpha transparent PNG's in background-image

[bittered]

From reading up on how IE handles PNG files with Alpha transparency I came to the premature conclusion that I could just add

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='myimage.png',sizingMethod='scale');

to every element that needs to be styled with an alpha transparent background image, so for example I could change...

div#container {
width:916px;
background:transparent url(../images/cont_bg.png);
margin:0 auto;
padding:0;
}

to this...

div#container {
width:916px;
background:transparent url(../images/cont_bg.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='../images/cont_bg.png',sizingMethod='scale');
margin:0 auto;
padding:0;
}

and everything would be okay in IE. The problem is that it doesn't work, the page renders exactly the same on IE with or without the IE filter.

What am I missing?

[garann]

You could try commenting your background so IE can't see it or adding a height. Doing both shouldn't hurt. So:

div#container {
width:916px;
[b]height:100px;[/b]
background [b]/**/[/b]:transparent url(../images/cont_bg.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='../images/cont_bg.png',sizingMethod='scale');
margin:0 auto;
padding:0;
}

[bittered]

Just tried both those suggestions but neither made any difference, except that there was no background when commented out.

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 3:23 am (utc) on Nov. 2, 2005]

[garann]

Darn. That's all I know. You could try adding

enabled=true

alongside the src and sizingMethod arguments. And this is obvious, but you'd wanna have the height set to the height of your image, not 100px. Otherwise, I don't think I know of anything else you could change. Maybe something is getting inherited or overriden by other CSS?

(By the way, saw it before the link was removed - nice site!)

[Setek]

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='../images/cont_bg.png',sizingMethod='scale');

Your filter has a '»' in there [post-AlphaImageLoader & pre-(]...

The code I've used is:

background: url('../images/cont_bg.png') no-repeat left top;
* background: none;
* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/cont_bg.png', sizingMethod='fixed'); }

Which works for me - so it looks like for IE you need to set the background to none :)

[bittered]

Thanks Setek, specifying background-image:none does the trick.

Unfortunately i've encountered a new problem... The alpha transparency is showing perfectly in IE now but any links that happen to be inside the container element with the alpha transparency will no longer work (ie.. they are not clickable) Working code is below...

IE specific CSS:

#container {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/cont_bg.png', sizingMethod='fixed');
}

HTML:

<div id="container">
<a href="http://...">Link</a>
</div>

[Setek]

Yep! I had the same thing...

In the end I had to settle for onclick=document.location.href on the div with the transparent png in it... I couldn't find any solution, so..

Sorry :/

[bittered]

I just found a soloution

#container a {
position: relative;
z-index: 500;
}