sab39 ... IE users rejoice

12/16/2004

I figured out how to make the transparent PNGs on this site display reasonably well for IE users without needing any complex hacks like IE7, which I was previously using but seemed to be able to crash the browser entirely in some cases, killed performance in all cases, and actually made the rendering of PNG backgrounds worse. I still think IE7 is a great idea, but it needs some of the kinks worked out before I dare inflict it on people.

In case you're interested, the workaround for transparent PNGs was to realize that I do actually know in all cases what color they will be displayed against, so if I save them from the GIMP with the background color set to that value, they'll display correctly.

transparent?

By dave at 2004/12/17 09:19

Are you saying that you can set the background color in the PNG metadata and it comes out correctly rather than mid-gray on IE but is still transparent in other browser, or that you removed all transparency from the image and replaced it with solid background colours?

Still really transparent

By Stuart at 2004/12/20 10:37

If you have a PNG with a transparent background, load it up in GIMP, set the GIMP's background color to your desired background, and then save the PNG without making any changes to it, IE will use that color as the background but other browsers will still display it as transparent.

You may need to make sure that "Save color values for transparent pixels" and "Save background colors" are checked when you save the PNG. I don't know whether those were necessary but I had them checked when it worked.

I have no idea what GIMP does in the metadata in response to these settings, though. If you're equipped to examine PNG metadata you could examine the PNG of my head to find out...

Even better...

By Marijn (Email) at 2007/07/15 11:00

Prolly a bit silly responding to such an old post, but I came by it accidentally searching for something else.
Anyway, what I usually do is indeed save the background colour (and make sure it's close to the colour it'll be placed over - which doesn't have to be a single colour, could be a background image) and then use an IE-filter to block out most of it.

E.g., say we have a background image with #123456 as the primary colour. Save your PNG with that colour as background (won't show up in real browsers), then apply the following CSS rule for IE lt 7-only:

#myimg {
filter: chroma(color=#123456);
}

Add a comment:

Subject:
Name:
Email:
Url:
Title:	Don't enter anything here if you're a human.
CAPTCHA:	Don't enter anything here if you're a human.
Comment: