Transparent PNG as a background

A class within a class. Or something.

[GuanoLad]

Hiya,

I want to use the transparency properties of PNG in a particular way.

I read a lot about how PNGs are so much better than GIFs (for filesize only, mostly, which has never been a major issue with me, but anyways) and then, as an almost hidden aside, they say that their transparency doesn't work with IE.

Unless you kludge together something, which someone else has done and I've used their code.

So it goes like this:

IMG.transparent {
behavior: url("pngbehavior.htc");
}

And that links to a file that does all that is required for IE to recognise transparency. That works perfectly.

But this is what I want:

TD.heading {
border : 1px solid #FF9933;
background-image: url('images/bgheading.png');
}

How do I specify that that particular PNG has the behavior characteristic? I'm not even sure if it's possible, which would be annoying.

Thanks

[GuanoLad]

Perhaps there is no answer, but that doesn't matter anyway.

I just discovered that transparent PNGs even with the proper kludge won't appear in my IE5.5, so I'll have to ignore it.

Why people recommend PNGs at all remains a mystery - they ain't really much use.

[Storyteller]

You can make PNG transparency work in IE, although you have to bend over backwards to do this.

Here's an explanation: [webfx.eae.net...]

But better don't use "behaviour" feature, go with JavaScript, which is more reliable in this case.

[GuanoLad]

Thanks. Your link doesn't have an alternative to the 'behavior' feature, so I'm stuffed. The basic idea works fine in IE6, but not in IE5.5 (it renders the images completely invisible), which means I can't use it.

[grahamstewart]

http://www.alistapart.com/stories/pngopacity/ is a nice article that explains how to render transparent PNG in IE 5.5 and 6 using this lovely bit of IE specific CSS..

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

Obviously they suggest wrapping this hideous thing up with some browser detecting javascript.

[edited by: Nick_W at 7:40 am (utc) on June 10, 2003]
[edit reason] de-linked: See charter change please ;-) [/edit]

[GuanoLad]

That's precisely what I'm using. It'd be nice if it worked properly 100% of the time. But nah, not this time. Maybe in five years time when everybody is using a browser that actually renders them properly.

Until then, I hope articles online and elsewhere would shut up about how great they supposedly are.

[grahamstewart]

That's precisely what I'm using. It'd be nice if it worked properly 100% of the time

Eh? I thought you said you were using the 'behaviour' technique?

The 'filter' technique is supposed to work in "any CSS 1-capable browser that can dynamically apply a background image to a DIV with JavaScript" which should include IE 5.5

Have you tried their demonstrations to make sure its not a bug in your implementation?

Note: It would be even 'nicer' if Microsoft just got its finger out and implemented the full PNG standard, but it doesn't look like that will happen soon...

Q: when will IE get transparent PNG support?
A: Ian, I'm sorry, I can't answer that question for you.

- Brian Countryman, Program Manager in Internet Explorer [microsoft.com]