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
point
I figured out the answer to my problem.
In GIMP,
Open the png and Save As
In the Save as PNG options window,
check Save background color
uncheck Save color values from transparent pixels
Save
The png is saved as a transparent png that has a white background in IE6.
No GIFs, No Javascript, No Problems :)
- Had no idea you could do this - awesome.
points
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.
- Had no idea you could do this this way too- awesome.
points
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
- 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.
- why not just use a gif then?
- Because the image is tilted and gif looks like crap.
- 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
points
here is the solution:
< img src="test.png" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="">
- this will make the png transparent. If you still want the background white in ie6, then you need to give the containing element (in your case ) a background color white: a{_background:#fff;} ---> this style will be only read by ie6 because of the underscore
points
Here's your png image in a page with the dd_belated script providing png support: http://boldfishdev.com/pngfix/
- 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.
points
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" />
<![endif]-->
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>
<![endif]-->
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.
