Posted By

adamcoulombe on 11/03/09


Tagged

css image png transparency ie6 images alpha pngfix


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

aleksanderek
robotici


Easy Cross-Browser Compatible Way to use PNG's with Alpha using only CSS


 / Published in: CSS
 

This is a 3 liner to use PNG images that contain alpha in IE6... fairly simple. First line is any styles we want to apply, including height and width. Second line we use alphaimageloader to load the PNG for ie6. The third line is for every other browser. This could also be done without the need for CSS hacks if you are going to have an IE6 specific stylesheet.

  1. /* This is a 3 liner to use PNG images that contain alpha in IE6... fairly simple. First line is any styles we want to apply, including height and width. Second line we use alphaimageloader to load the PNG for ie6. The third line is for every other browser. This could also be done without the need for CSS hacks if you are going to have an IE6 specific stylesheet. */
  2.  
  3. #myPngImageBox { height:200px; width:200px; /* put any other styles here */ }
  4. * html #myPngImageBox /* for Old IE */ { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myImage.png'); }
  5. * > #myPngImageBox /* for Good Browsers */ { url(myImage.png) no-repeat; }

Report this snippet  

You need to login to post a comment.