CSS for lunch

In honor of Mager’s new transparancy-heavy (and f***ing sick) site redesign by Marc Mendell, here’s a quick and easy way to make png transparencies work in IE6.

So you have your background url set something like this and it looks awesome in all the real browsers:

#pngImage {
      background: url(transparent-bg.png) no-repeat;
}

But in IE6 it looks like pure shyte. All you need is a simple star hack and MS’s proprietary AlphaImageLoader…

* html #pngImage {
      background-image:none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
      (src='transparent-bg.png', sizing='scale')
}

This is a great trick when you just have one (or a few) png transparencies in your css.