Transparent PNG images have been always been a great tease to web designers. But, in Internet Explorer the image background may appear to be gray rather than transparent.

Internet Explorer there is some support in the form of proprietary filter called the AlphaImageLoader. Internet Explorer filters can be applied directly in your CSS (for both inline and background images), or by setting the same CSS property with JavaScript.

CSS :

img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(…);}

javascript :

img.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(…)”;

as demonstrated in the following example:

<span style=”width: 16px; height: 16px; display: inline-block;”>

<img style=”filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);” src=”images/close.png” border=”0″ alt=”” width=”16″ height=”16″ />

</span>

or :

#header span {

float:left;

display:inline-block;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’images/header01.png’);

}

#header span #left {

width:510px; height:233px; background-image:url(images/header01.png);

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); background-repeat:no-repeat;

}