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!

This entry was written by Juan, posted on January 10, 2006 at 1:31 pm, filed under CSS, English, Web Development. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Both comments and trackbacks are currently closed.

7 Comments

  1. willi
    Posted August 9, 2006 at 3:19 pm | Permalink

    thanks for that great example! you have saved my life!

  2. Juan Wong
    Posted August 9, 2006 at 4:22 pm | Permalink

    Glad I can help ;)

  3. James
    Posted March 1, 2007 at 10:20 am | Permalink

    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

  4. James
    Posted March 1, 2007 at 10:21 am | Permalink

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

  5. Juan Wong
    Posted March 1, 2007 at 10:55 am | Permalink

    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.

  6. Edmonton Web Design
    Posted November 24, 2007 at 3:29 pm | Permalink

    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.

  7. Juan Wong
    Posted November 24, 2007 at 8:44 pm | Permalink

    Sure thing, glad to be of help!