Emily G 620

I have a PNG with a transparent background. When I view this PNG in IE6, the background is light blue.

How do I change the background so it shows up white in IE6 while still transparent in other browsers?

I have Photoshop and GIMP so a solution in either is fine.

6 answers

Emily G 620
This was chosen as the best answer

I figured out the answer to my problem.

Open the png and Save As

In the Save as PNG options window,

check Save background color
uncheck Save color values from transparent pixels


The png is saved as a transparent png that has a white background in IE6.

No GIFs, No Javascript, No Problems :)

Answered about 7 years ago by Emily G
  • Had no idea you could do this - awesome. nine_toes almost 7 years ago
Doug 1095

You can edit the background color of a PNG with TweakPNG and make it any color you want. The background color will show when displayed in a program that can't interpret the alpha transparency (e.g., IE6). A PNG with no background color specified will have a gray background by default.

Answered about 7 years ago by Doug
  • Had no idea you could do this this way too- awesome. nine_toes almost 7 years ago

IE6 doesn't support Alpha transparent pngs without the help of some javascript.

you can either load a gif version for IE6 (use a conditional comment to load a different stylesheet) or use a javascript library to provide IE6 with support for the png.

see: http://www.dillerdesign.com/experiment/DD_belatedPNG/ for a good Javascript solution.

read about conditional comments here

Answered about 7 years ago by Tony Crockford
  • Right. I know IE6 doesn't support alpha channels but the image will display in IE6 with a background color. In this image the background color is light blue. I would like it to be white. It is an <img> in an <a> so the gif or javascript solutions will not work for me as it needs to be clickable. Emily G about 7 years ago
  • why not just use a gif then? Tony Crockford about 7 years ago
  • Because the image is tilted and gif looks like crap. Emily G about 7 years ago
  • in my IE6 your image, when embedded in a page displays with a grey background. - I don't think you have control over the background color that IE6 uses when it can't read the alpha channel, so you'll need the extra javascript support. dd-belated will work just fine with a png as a src - http://www.dillerdesign.com/experiment/DD_belatedPNG/#img_support Tony Crockford about 7 years ago

here is the solution:

>< img src="test.png" style="filter:
> progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',
> sizingMethod='scale');" alt="">


Here's your png image in a page with the dd_belated script providing png support: http://boldfishdev.com/pngfix/

Answered about 7 years ago by Tony Crockford
  • Thanks. I'll remember dd_belated for when I need a javascript solution. I think it is overkill in this case for one image on a white background and I was able to fix my png file directly. Emily G about 7 years ago

I suggest you separate your styles for IE6 if that's the case, esp. if there are more than one png images on your site. Put this at the head on your html document/master template.

<!--[if lt IE 7]>
     <link href="iefixes.css" rel="stylesheet" type="text/css" />

this way you don't have to make the styles inline and ruin your crafted stylesheet for modern browsers.

or if you just want a quick solution then I'll recommend UnitPNG fix. It's lightweight and works like magic. It will work on all png images in your site or you can just target specific ones if you want.

Just like the what i mentioned before on creating a separate stylesheet, you'll just put something like this at head of your html document

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>

Hope this helps.

PS. Take note that all JS solutions will need javascript to be enabled on your viewer's browser for them to work, I think you need to consider one.

Answered about 7 years ago by voidnothings