Displaying PNG 24-bit Alpha Transparency on IE with CSS
10 01 2006After reading Justin Koivisto’s great article: Normal Display of PNG Alpha Transparency with MSIE and reading his PHP code, I said to myself: “myself, there should be a much simpler (lazy, if you will
) way to accomplish this”. True, I could just copy, paste and use his code, modify the .htaccess file (or add the MIME type to the Apache server) but still…
Another approach is Bob Osola’s JavaScript script (this is pretty cool too) found in his article: The PNG problem in Windows Internet Explorer.
Personally, I wouldn’t use more than 2 or 3 images on a page, so I believe the use of CSS will do.
I have an example where you can see the results (please see the page source to see the code). The drawback of this approach (as it is written right now – using the background-image property) is that no image(s) will be displayed if the user has CSS disabled.
Again, if you will have lots of .png images and don’t want to have a bunch of CSS classes, you’re better off using Koivisto’s or Osola’s approach.
CSS Compatibility
- Firefox 1.5 (Win XP and Linux)
- Internet Explorer 6 (duh!)
- Opera 8.51
- Konqueror 3.5.0
I don’t have Safari but my guess is that it will work
Enjoy!
Categories : CSS, English, Web Development

















Recent Comments