Simple solution: PNG-24 alpha transparency on IE 6

This solution only uses CSS and doesn’t involve creating additional images other than the single source PNG-24 file. The point is to put the image in a div, using IE specific “filter” extension for IE6 only and background-image for other browsers only. I’ve tested on IE6/7, FF3.5 and Safari.

HTML:

<div id=”header”>
<div id=”hdr_content”><div id=”hdr_logo”></div></div>
</div>

CSS:

#hdr_logo{
background: url(“images/logo_24.png”) repeat-x;
/*IE6*/
*background: none;
width: 191px;
height: 34px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo_24.png’, sizingMethod=’scale’);
}

About these ads