Use PNG image across browser (include IE6)

PNG image is not supported by IE6, to work around this, we can use AlphaImageLoader Filter in CSS.

The idea is using two divs, first one for IE only (IE6, IE7), the second one for Major browsers that support PNG, such as IE7, Firefox, and Safari. IE7 will pick up both, so we have to target it to force it use one only.

For example: If we want to make a button with transparent background using png image, first we need to make a div for browser that don’t support png, and another div for those does support png.

HTML Code:

<div id="ie6_button"><a href="#"></a></div> /*No text here, other browser will use the one below*/
<div id="general_button"><a href="#">Click here</a></div>

CSS Code:

IE6, IE7 will read this, other browser won’t understand the filter part, but will pick up the image dimension.

#ie6_button a{ display:block;height:50px; width:100px; float:right;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/button.png', sizingMethod='scale');}

#ie6_button a:hover{ cursor:pointer;display:block;filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader (src='/images/button_over.png', sizingMethod='scale');}

Target IE7 and Firefox, etc.

html>body #general_button a{ color:#FFFFFF; display:block; text-transform:uppercase; font-size:9px;float:right;width:100px; height:50px; position:relative; left:149px;background:url(images/button.png) no-repeat right top; text-align:right}

html>body #general_button a:hover{background:url(images/button_over.png) no-repeat right top}

Because IE7 will recognize the AlphaImageLoader script, it will display both background settings, here we can target IE7 make it use AlphaImageLoader only.

*:first-child+html #button { background:none; /* Make IE7 use ImageLoader only */}

Be aware that the genera_button need to be relative positioned so that it won’t be pushed by ie6_button.

Note:

1. AlphaImageLoader require ActiveX support and will not work on Stand alone IE6.

2. If there is more transparent effect on the page, this may not be a practical way. You may consider cutting the png with backgroud.

More information about AlphaImageLoader
Cross-Browser Variable Opacity with PNG: A Real Solution