PNG Files Transparency Problem(Grey Color) in Internet Explorer

Internet Explorer below 7.0 does not support 24-bit alpha channel transparent PNG images. PNG image background turn into gray color rather then transparent. IE version 7 and above completely solved this issue and fully support PNG images.? Other modern browser such as Firefox, Opera, Flock support png images from start.

How to Fix:

  • Use transparent gif file instead of PNG file.
  • Avoid direct use of images for transparent PNG file. Use Microsoft AlphaImageLoader filter, as described below:

    <DIV ID=”oDiv” STYLE=”position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src=’image.png’, sizingMethod=’scale’);” >
    </DIV>

  • Download pngfix javascript pngfix file. Extract zip file and upload on your webserver. This .JS file uses same concept as in second point to render PNG images.
  • Include js file within <head></head> section like below.? Replace “your file path” with actual file path before upload. 
    <!--[if lt IE 7.]>
<script defer type="text/javascript" src="your file path/pngfix.js"></script>
<![endif]-->n
  • Save the document and upload to server. This fix apply to all PNG images automatically in Internet Explorer. Other browser simply ignore this.

Written by Bala Krishna

Bala Krishna is web developer and occasional blogger from Bhopal, MP, India. He like to share idea, issue he face while working with the code.