Check out the Latest Articles:
IE6 PNG Transparency Fix with Repeating and Positioned Backgrounds

So here we go with another IE6 fix. Now, I don’t completely blame Microsoft for not supporting this in IE6. Updates are designed to add functionailty; updates like IE7 and IE8. But as my previous post mentioned, upgrading to IE6 may not be possible for a number of reasons.

Doing a quick Google search you will find a number of possible ways of fixing it. Some are as simple as not using transparency, faking transparencies, using gif’s for simple transparencies, and even some java script like fixes like this. Maybe you found this page by searching from Google?

Now, gif’s in some situations are fine; but they do not support alpha transparencies. Alpha transparencies look amazing with curves, and I have seen some really cool effects when you start overlaying alpha transparent images. The problem with transparent gifs is the “halo” effect you get, which is not really a bug, and is visible on all browsers.

Both of these images are identical; I have them wrapped in div’s with different colors. You can see the “halo” effect on the black background because the image was originally created with a white background. So really gif’s is not something people like to go to always.

So for a fix. There seem to many javascript based fixes in the forms of .js and .htc scripts where you can add non-standard css to add behaviors (IE6 causes you to code in a non-standard way, awesome). Some are better than others; some pack them selves as for a group of fixes for IE6; but this by far has been the best.

What sets this fix apart from the rest is the fact you CAN have background positions and/or you CAN have repeating backgrounds (either tiling, repeat-x, or repeat-y). It also is one file only; no additional 1×1 transparent .gif files as “shims”. Since there is no file replacement you can ALSO give links backgrounds and still be click-able! also uncompressed it uses a mere 12KB unlike many other scripts I’ve seen taking nearly 100KB after being packed or minified. One of the best parts is you don’t need to add non-standard CSS coding to get it work.

This is easily the best PNG fix I have found to date.

Comments are closed.