How can I use alpha tranparent PNGs across all browsers?

Many web developers have shunned the PNG image format in the past. For some this has been because of a perceived lack of support for alpha transparency in Internet Explorer. This FAQ shows how you can use alpha transparency successfully across all browsers - and specifically IE 6 for Windows.

This expands on the earlier faq215-3207.

The examples below rely on the following CSS code (described below):
[code CSS block]<style type="text/css">
#demo1 {
width: 250px;
height: 100px;
background: url(images/logo.png) transparent top left no-repeat;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
#demo1 {
background-image: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=/images/logo.png);
}
</style>
<![endif]-->[/code]
The first block of CSS sets a background image on an element with the id "demo1" (typically a div, span or img) for all browsers. This works fine for everything else, but doesn't work with IE prior to version 7.

The second block targets just these "broken" browsers through use of a conditional comment - more at faq215-6625. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the [link http://msdn2.microsoft.com/en-us/library/ms532969.aspx]MSDN site[/link].

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

There are plenty of variations of this technique. All the examples above are considered "standards friendly". This final example shows the same CSS simplified (but not passing validation):
[code CSS block]<style type="text/css">
#demo1 {
width: 250px;
height: 100px;
background: url(images/logo.png) transparent top left no-repeat;
_background-image: none;
_filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=/images/logo.png);
}
</style>[/code]
If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note... you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here - changing it to 32-bit confirmed this was the case).

Jeff