Transparent PNG backgrounds in IE6

Discussion in 'Web Design & Coding' started by dorfire, May 9, 2008.

  1. dorfire

    dorfire OSNN Junior Addict

    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')";
  = 'none'; = 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>
    Hope it helps...
    MikeRS likes this.
  2. MikeRS

    MikeRS OSNN Junior Addict

    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.