Displaying PNG 24-bit Alpha Transparency on IE with CSS

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!

7 thoughts on “Displaying PNG 24-bit Alpha Transparency on IE with CSS

  1. James

    Could you please check out this page http://testbed.c-ram.com/ndbrandedbeef and tell me what’s wrong. I’m using the exact same code you are and the transparency isn’t working for me.
    Thanks

  2. James

    My bad, this is the url don’t mind that first one. http://testbed.c-ram.com/ndbrandedbeef/retailstore.html

  3. Juan Wong Post author

    James,

    The ‘trick’ of this technique is to use your .png file as a background image.

    If you see in my code, the image source in my <img> tag is different from the one in the .img class definition. The image file in the <img> tag is a 1×1 .png file which I’m using as a ‘place holder’ only.

    So I’d suggest you to do the same. Also, your CSS should look something like this:

    .img{
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/frontpic.png', sizingMethod='scale');
    	background-color: transparent;
    	/*Notice I'm defining the image width and height here*/
    	width: 289px;
    	height: 380px;
    }
    
    html>body .img{background-image: url(images/frontpic.png)}
    

    Note the html>body child selector. This will be read by browsers such as Firefox, Safari, etc. Since these browsers will ignore the filter: property (this is a Microsoft thing), and you need the background image to be displayed, the .img definition next to html>body will be applied (and will be ignored by IE6 because it doesn’t understand it).

    Hope this helps.

  4. Edmonton Web Design

    Thanks for this! I was using a javascript method before, but this is much cleaner. I’m just having trouble getting things to work properly on a:hover. For some reason in IE6 only the transparent portions of the image are “hoverable”. I’m sure I’ll come up with a solution.

Comments are closed.