Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

PNG-24 Alpha support for IE (See related posts)

What so much webdesigners dream about!
Get alpha channel on web, that's possible with PNG-24 images and this trick.
BE CAREFUL: that seem to work only for 10 images per page.

  # Display PNG-24 images with alpha channel on IE
  # BE CAREFUL: with this trick, only 10 PNGs seems to be supported by IE
  # Don't forget to set the size of your div
  def transpng(id, png)
    '<style type="text/css">
      <!--
        ' + id + ' {
          background-image: url(' + png + ');
        }
      -->
    </style>
    <!--[if IE]>
    <style>
      ' + id + ' {
        background-image: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + png + ', sizingMethod=\'scale\');
      }
    </style>
    <![endif]-->'
  end

Comments on this post

jms posts on Jul 19, 2006 at 14:22
Nice snippet, but this method has a few flaws. First of all, the space on top of the background image is 'dead'; links cannot be clicked on. I've also noticed inconsistent renderings on Windows XP SP1 vs. SP2
IE does support 8-bit PNGs, so if you desperately need PNG support but can do without the alpha channels thats another option

You need to create an account or log in to post comments to this site.


Click here to browse all 4836 code snippets

Related Posts