Monday, May 4, 2009

Internet Explorer (IE) & Transparent png Images

IE version 6.0 and earlier versions do not do a good job display png files with Transparency. Below you will find the solution to the problem.


#bkgrnd{
width:100px;
height: 100px;
background-color: pink;
background-image:url('images/transparency.png');
_background-image:none; /*IE Fix*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/transparency.png');/*IE Fix*/
}


The fix is simple, the line:

_background-image:none;

makes IE remove the background image and then uses the one specified in the filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/transparency.png');

Follow the link to see it in action.

0 comments:

Post a Comment

Thanks for your comment.