Transparent PNG backgrounds in IE6

[dorfire]

The solution is well known when we're talking about plain <img> tags, but it's not that trivial when we put the image as a CSS background.
I didn't want to convert my background images to GIF, so I wrote this Javascript code:

window.onload = function()
{
	var elementIdentifiers = ['element_with_png_bg_ID', 'id2', 'id3'];
	
	for (var i in elementIdentifiers)
	{
		var currentElement = document.getElementById(elementIdentifiers[i]);
		if (!currentElement) continue;
		
		var backgroundImage = currentElement.currentStyle['backgroundImage'];
		var backgroundImageUrl = backgroundImage.substring(5, backgroundImage.length-2);
		var filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader  (src='"+backgroundImageUrl+"', sizingMethod='scale')";

		currentElement.style.backgroundImage = 'none';
		currentElement.style.filter = filterString;
	}
}

If you want the code to be executed only in IE6 and lower versions, use this conditional comment:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="iepngfix.js"></script>
<![endif]-->

Hope it helps...

 

[MikeRS]

You might also want to look at IE7/8.js for working around a lot of the design flaws in Internet Explorer.

I've put it on a few websites before, and it usually does the job fairly well for those poor IE users left in the world. I like to write pages as the markup is intended to be used, but IE doesn't make it easy, heh.