created: March 27, 2006 - modified: June 10, 2008

Problem addressed

Supporting Alpha chanel transparency in IE using CSS

Solution

As of IE 7.x you no longer need to use filters to support PNG Alpha Channels.

01 div#wantfancypngbackground {
02 /* turn off any current background image in place 
	for other browsers, typically the png */
03  background-image:none; 
04 /* reload the image using WIN IE's proprietary filter */
05  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
		(src="image.png", 
		sizingMethod="crop|image|scale");}
06 /* sizingMethod: 
07  crop: clips the image to fit the dimessions of the object.
08  image: Default.  Enlarges or reduces the 
	border of the object to fit the dimensions of the image.
09  scale: Stretches or shrinks the image to 
	fill the borders of the object */

Background

One of the most annoying problems designers run in to for Win IE is it's apparent lack of support for PNG Alpha transparencies. I say "apparent" because there is a way to display PNG's properly in WIN IE 5.5+, it's just not quite automatic.

For PNG images that are part of the sites content, I rely on JavaScript to modify the page's Document Object Model (DOM) to replace <img> tags with <span> tags with the above AlphaImageLoader filter applied as an inline style, with the original PNG file as the source. The width and heigth defaults to the files actually width and height unless set in the style sheet.