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:
Consider the following CSS code:
/* IE */ .transparentBox
Arial, Verdana, Sans-serif;
border: solid 1px #333;
sizingMethod=scale src='Images/bg.png'); } /* Mozilla, Opera, Netscape, etc */ .transparentBox[class]
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
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
we use the filter
property with the following value:
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…
… 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;">
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.