Welcome to WebmasterWorld Guest from 3.227.2.109

Forum Moderators: not2easy

Message Too Old, No Replies

Displaying alpha transparent PNG's in background-image

     
10:50 pm on Nov 1, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 11, 2005
posts:7
votes: 0


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?

11:37 pm on Nov 1, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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;
}
11:53 pm on Nov 1, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 11, 2005
posts:7
votes: 0


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]

9:29 pm on Nov 3, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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!)

1:58 am on Nov 4, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


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 :)

1:23 am on Nov 12, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 11, 2005
posts:7
votes: 0


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>
2:08 am on Nov 12, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


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 :/

2:56 am on Nov 12, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 11, 2005
posts:7
votes: 0


I just found a soloution


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