...

View Full Version : Using PNG images with transparency as background images



Fumigator
07-02-2007, 04:50 AM
I have an issue with IE6 vs. FF and a background image that is a PNG file with transparency in it. I understand that IE6 does not do alpha channel transparency, but this is a full transparent section in the graphic.

Any help would be appreciated... I've attached screenshots of the FF and IE6 results as well as the background graphic. The one with orange coloring is displaying properly in FF; the one in gray is IE6. If it would help to see an example I'll link to one.

Bill Posters
07-02-2007, 10:37 AM
e.g.

yourmain.css:

selector { // for compliant browsers
background: url(path/to/image.png);
}

iewin5-6.css:

selector {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale");
}

markupů

<style type="text/css">

@import url(yourmain.css);

</style>

<!--[if lt IE 7]>
<style type="text/css">

@import url(iewin5-6.css);

</style>
<![endif]-->

More info on conditional comments (http://www.quirksmode.org/css/condcom.html).

Fumigator
07-03-2007, 06:46 AM
Thanks for the info... I can't stand bending over backwards for a poorly written and intentionally non-compliant browser so I'll have to figure out another way to do it.

Bill Posters
07-03-2007, 09:07 AM
There are js 'fixes' which automate the process to some degree.

e.g.
http://homepage.ntlworld.com/bobosola/
http://allinthehead.com/retro/69/sleight-of-hand
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://dean.edwards.name/IE7/

However, I tend to avoid js-based fixes for this problem. (I don't see the wisdom of making the correction of a CSS problem unnecessarily dependent upon an otherwise unrelated technology - namely js.)

Additionally, I tend to use PNG24 images so sparingly, and even then only as background images (I've yet to encounter a case where a content-carrying image needs alpha transparency), that manually implementing the workarounds in the CSS of a conditionally commented IE stylesheet only takes a minute or two. For the sake of that extra minute or two's work, I can avoid using a fix which presents an additional potential point of failure (js dependence).

I'll often institute one or two conditional commented stylesheets in all projects by default, even if the stylesheets themselves are empty at launch. Just in case I need to throw in some IE version-specific CSS later on in the project.

VBAssassin
07-03-2007, 10:39 AM
Hello,

Download TweakPNG: http://entropymine.com/jason/tweakpng/

Open the file, drag a .png file on to the programs window... double click gamma... and enter 0... then save (ctrl + s).

This will totally stop the transparency problem in IE. IE will never fix this problem because technically it is not a problem. It is how PNG images are supposed to be displayed however most browsers ignore it for obvious reasons. Personally i think IE should ignore the gamma as well so they fit with other colors.

Kind regards,
Scott

_Aerospace_Eng_
07-03-2007, 10:50 AM
Hello,

Download TweakPNG: http://entropymine.com/jason/tweakpng/

Open the file, drag a .png file on to the programs window... double click gamma... and enter 0... then save (ctrl + s).

This will totally stop the transparency problem in IE. IE will never fix this problem because technically it is not a problem. It is how PNG images are supposed to be displayed however most browsers ignore it for obvious reasons. Personally i think IE should ignore the gamma as well so they fit with other colors.

Kind regards,
Scott

Correction IE6 will never fix this problem, IE7 has. And yes it is a problem with IE6. Just like gifs, pngs can be transparent as well but IE6 as stated doesn't understand alpha transparency. Most other browsers do. You say "It is how PNG images are supposed to be displayed", can you prove this or are you just saying this because its your opinion?

VBAssassin
07-03-2007, 12:18 PM
Correction IE6 will never fix this problem, IE7 has. And yes it is a problem with IE6. Just like gifs, pngs can be transparent as well but IE6 as stated doesn't understand alpha transparency. Most other browsers do. You say "It is how PNG images are supposed to be displayed", can you prove this or are you just saying this because its your opinion?
I don't mean the transparency... yes there were problems with transparency in IE6 which have been fixed in IE7... however i am on about the gamma which is also a common problem amongst using PNG's on the web with IE... and how IE actually uses the gamma while other browsers ignore it... Microsoft have no intention on fixing the gamma problem because it's not actually a problem... in fact it is the correct way of displaying PNG's however in web sites its better not to use gamma.

Kind regards,
Scott

Edit: Here is your proof: http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=153

Bill Posters
07-03-2007, 12:32 PM
VBAssassin, when you stated "IE will never fix this problem because technically it is not a problem", others reasonably assumed you were talking about the problem under discussion - that of the failing transparency, not the gamma issue.
Perhaps you could have made it clearer that you weren't actually addressing the OP's problem with your post.

It's not the accuracy of your statement which is in doubt; it's the relevance.

VBAssassin
07-03-2007, 01:59 PM
Lol fair enough... my mistake on that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum