Displaying PNG 24-bit Alpha Transparency on IE with CSS

10 01 2006

After 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 :D ) 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… :P

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 :D

Enjoy!

Comments : 7 Comments »
Categories : CSS, English, Web Development


LiveSTRONG