Ok, so I had to do a transparent box on top of a photo, and it had to work in IE6. I already talked about how to do PNG’s in IE6 using Fireworks and CSS, without any javascript or hacks. Well, it didn’t work with a 60% white box over a background image.

I have a div with a background image, and a div on top of that with the 60% white transparent box. Here is an example of what I needed to do:

Here is what you have to do to get that to work in IE6:

1) Save the file as a PNG-24 in Photoshop
2) Open it in Fireworks
3) Change the PNG-32 to PNG-8
4) Change No Transparency to Alpha Transparency
5) Click Rebuild
6) Export

Here is the CSS:

background-image: ulr(../images/imageName.png);
_background-image: url(../images/imageName.png);
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader 
(src='../images/imageName.png',
sizingMethod='scale');

Remember that the _ means that it is only using that attribute for IE6.

This entry was posted on Wednesday, September 9th, 2009 at 5:02 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.