I fired up Photoshop for the first time in a long time. I created a transparent PNG for an image that would be used as a CSS background-image. It keeps displaying with a gray background even though the page background color was something else.

This is a pretty well documented bug. Luckily, there are a couple of ways to fix this.

Here are my two favorites:

The first solution is well documented:

Download iepngfix.zip. The development version 2.0 Alpha 3 has support for background position and repeat. Extract the zip and copy iepngfix.htc and blank.gif somewhere. I put in under stylesheets.

Add the following snippet to your CSS stylesheet:

img { 
	behavior: url(/stylesheets/iepngfix.htc); 
}

And you’re done! Hit refresh in IE6 and transparent PNG images should render correctly now.

You can add apply this fix to other elements that may be using PNG images as CSS background images as such:

img, #logo { 
	behavior: url(/stylesheets/iepngfix.htc); 
}

where logo is a div that has a background-image that is a transparent PNG.

Note: If you are using v2.0 and want to take advantage of background-repeat and position support, copy iepngfix_tilebg.js to your javascripts folder and include the js file in the HTML files you need it for.

The second way to fix this is to get everyone off IE6 but I guess that’s just wishful thinking…