Adding PNG Alpha-transparency Support for Internet Explorer Without Scripting

As png alpha channel transparency empowers web-developers with new abilities, and Internet Explorer does not support it, this tutorial will show how IE png support could be elegantly achieved using CSS only, without complex scripting, behaviors and browser-specific hacks in two steps only:

1. Add PNG support in the markup:

Consider the following CSS code:

/* IE */
.transparentBox
{
 font-family: Arial, Verdana, Sans-serif;
 font-weight: bold;
 padding: 30px;
 margin: 30px;
 border: solid 1px #333;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Images/bg.png');
}
/* Mozilla, Opera, Netscape, etc */
.transparentBox[class]
{
 background-image: url(Images/bg.png);
}

We have two similar classes, which refer to a <div>…</div> object(s) within the page. One of the differences is the use of selectors with attributes - [class], which is part of the official W3C CSS2 specification, natively supported by Mozilla, Opera and Netscape, but not by Internet Explorer.

Looking at the CSS properties, we can see another difference – the first selector does not have the background-image property, while the other one does. Instead of background-image, we use the filter property with the following value:

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

The above statement will be visible by Internet Explorer only, because filter is Microsoft CSS extension and will be used instead of background-image. Browsers, different from Internet Explorer will simply ignore it and move to the next rule…

.transparentBox[class]
{
 background-image: url(Images/bg.png);
}

… and load the same Images/bg.png image as a background.

Important: Notice that the alphaImageLoader filter images use paths relative to the .aspx, not to the .css file, i.e. if we use external stylesheet and specify the filter images relative to it, this workaround will not work.

Here is the HTML markup for the example:

<div style="float: left; background-image: url(Images/flowers.jpg); border: solid 1px #333; padding: 10px;">
 <div class="transparentBox">Transparent Box 1</div>
</div>

2. Add PNG Support for Microsoft IIS

Microsoft's Internet Information Server shipped by default without an explicit MIME type for PNG images until version 6. Unfortunately, most people running older IIS servers remain completely unaware of the problem, and in order to successfully finish our task, we have to manually add it in server’s console.