Cross-Browser Transparent Images

Because of things like rounded corners, shadow effects, and flyout modals, transparent images are very popular in today’s “web 2.0″ design standards. But one of the most annoying problems in building a XHTML/CSS website is the inconsistencies with transparent PNG images. More specifically, the lack of proper support for PNG transparencies in Internet Explorer 6.

There are two good solutions to fix this problem:

1) IE PNG FIX - This solution uses Javascript and the filter AlphaImageLoader property of IE. Or to demonstrate more simply, if you put

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(url_to_transparent_image);

inside the CSS of a DIV, it will allow IE6 to render the transparent image correctly.

But there are several MAJOR drawbacks to using this method

• You can not position the background image
• You can not repeat the background image
• And lastly, this won’t pass validation

2) Firework PNG8 Trick - When I first learned of this method from Phil (Thanks Phil!), I thought it was going to be the ultimate solution, the silver bullet. But when I used this in our project, I realize it had one small problem.

Comparison of Firefox and IE6 PNG8 Fix

The image above is a screenshot of the bottom edge of a dropdown menu with a rounded-corner PNG image.

• In Firefox, the shadow effect on the image is properly rendered from a white image, to a white background.
• In IE6, the Firework PNG8 can not render the shadow effect properly, so the white image completely blends in with the white background, destroying the transparency effect.

Normally if you had, let’s say for example a black background, the Firework PNG8 fix would work because there would be a contrast between the two images, allowing you to see the rounded corner. But in this case, it does not work. Alas, this solution is “almost” perfect.

So to sum it up, using a combination of these two methods, you can achieve the desired effect depending on your needs. Good luck!