March 25, 2006

Using Transparent PNGs in Internet Explorer

March 25, 2006, 11:45 AM | 10 Comments

Up until a couple of weeks ago, I thought that there was no way to use transparent or semi-transparent PNG images in IE. I was wrong. My only excuse is a bad one too: I read it somewhere.

The truth is that there is a pretty good way to use transparent PNG images with CSS. It’s not without its drawbacks (I’ll get into those later) and it doesn’t use valid CSS, but while we wait for PNGs to be fully supported by all major browsers, it seems to me that it’s a fairly good solution.

It’s my opinion that the benefits of using alpha PNG images far outweigh the drawbacks of your CSS not validating, so without further ado, here’s how it’s done:

#example_image {
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='your_image.png',sizingMethod='scale');
}

html>body #eample_image {
    background: url(your_image.png);
}

The trick is to use CSS’s filter attribute to call a proprietary Microsoft component that will handle the PNG image. Click here to see an example.

The basic technique is fairly simple, but there are a few things that need to be expanded upon. First of all, I’ve found that the src property doesn’t handle relative paths very well, so unless the image is in the same directory as the CSS that’s calling the AlphaImageLoader (or a subdirectory of that current folder), I would suggest using the absolute paths (or even the full URI) to reference the image file.

The second property in the function call is the sizingMethod, which takes 3 different values. Scale, which causes the image to scale to the dimensions of the object that’s using it, Crop, which clips the image to fit the dimensions of the object and Image, which causes the element’s borders to expand or contract to fit the actual dimensions of the image. The default value is the image value.

For more information on the AlphaImageLoader, see Microsoft’s documentation.

You’ll also notice that I didn’t set the background image in the same section as I’m calling the filter attribute. The reason for this is that IE still understands the background image attribute and would load the PNG image without the alpha channel support. So, I’ve used a child selector to set the background for all browsers that understand that syntax.

What about IE 7?

Internet Explorer 7 will support PNG images with the alpha channel, but as far as I know it’ll still handle the filter component as well - so what to do? Well, it’s considered a best practice to separate all IE specific hacks (or any browser specific tweaks for that matter) into a separate stylesheet anyways, so we’ll insert a conditional comment that will detect (without JavaScript) IE versions 6 and under.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie_style.css" />
<![endif]-->

If you’re familiar with programming decision structures, you’ll notice that it’s using an IF/EndIf statement. The ‘lte’ stands for ‘Less Than or Equal’ to IE 6, and will use the code contained in the If statement for any version of IE less than or equal to IE 6. Incidentally, IE5.5 also supports this PNG filter method.

There are drawbacks?

Sadly, yes. As with any proprietary way of doing things, this PNG filter method also has some drawbacks. I mentioned before that the CSS for this method is not valid, but that’s not really a big deal if you’re only serving it to IE 6 and under. The main drawback of this method is that if you want to have an anchor tag (hyperlink) on top of your PNG image, you’re sort of out of luck. The best way to get around this is to just set the PNG image as background for the anchor itself. It’s obviously not ideal, but it’s also not that big of a drawback because there are ways around it. It just may take a little more creativity when you’re slicing your images.

Check out this example that shows the differences between using an anchor tag on top of a PNG and an anchor tag where the PNG is set on the anchor tag itself. (Be sure to view the page in both Firefox and IE to see the differences. Make sure to actually click on the links and also make sure to take a look at the source code).

One final note

Just one final note: when using the PNG filter method on an anchor tag, in IE you’ll need to specify the CSS value for the cursor (the mouse pointer), otherwise, all you’ll get in IE is the default pointer (usually an arrow, unless you’ve got a custom icon set). Here’s an example:

#example_link a {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='your_image.png',sizingMethod='scale');
    cursor: pointer;
}

Putting it all together

Because this little ‘tutorial’ has been put together in bits and pieces with a lot of explanation, I thought I’d post all the code together in one spot to tie it all together.

XHTML:

<html>
<head>
<title>Your Title</title>
<link rel="stylesheet" type="text/css" href="main_style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie_style.css" />
<![endif]-->
</head>
<body>
<div id="Example">
    <a href="#"></a>
</div>
</body>
</html>

CSS - main_style.css:

#Example {
     width: 200px;
     height: 200px;
}

#Example a {
    display: block;
    width: 200px;
    height: 200px;
}

html>body #Example a {
    background: url(your_png_image.png) no-repeat;
}

CSS - ie_style.css:

#Example a {
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='your_png_image.png',sizingMethod='scale');
     cursor: pointer;
}

So there you have it! There is a way after all to use transparent PNG images in IE. Feel free to post any questions or comments below.

Update: Jeff Croft has written a great article over at Digital Web Magazine that does a great job of outlining a lot of practical uses for using transparent PNG images. Be sure to check it out.

Posted in: Code, CSS, CSS Tips, Web Development