This issue was fixed in Internet Explorer 7 beta 1.
Oh yes, that old favourite. And I do mean old. Microsoft implemented PNG in IE 4, but did not bother to implement PNG transparency, one of the most useful features of the PNG format (the other is the fact that it can compress images without affecting image colours or quality). So when IE 5 came out, people were hoping they would add the support for it. No. Not even in version 6.
PNG Alpha transparency can be used to create beautiful shading effects, or make backgrounds that work independently of the background colour, so that changing one does not need you to change the other.
When IE 5.5 was released, Microsoft added an extra feature called the Alpha Image Loader that could apply transparent PNGs to the background of a DIV. To use it, you must apply a few non-standard styles, invoking Direct X to create a filter, make the normal image invisible, and replace it with a new element using the Alpha Image Loader. Each image needs to be configured separately in the CSS. So web developers came up with a variety of CSS and JavaScript tricks that would apply it automatically.
But why? Why should web developers have to jump through hoops trying to put a simple image in their page? It's just a picture. You wouldn't have to go through all this to put any other picture on the page. You certainly wouldn't have to do this for any other "modern" browser.
These techniques are not really any good anyway. They require a large amount of extra HTML markup. They require extra CSS. They require images to be configured in several places in CSS and HTML. They require a Direct X plugin. Some require JavaScript support (on local pages in IE 6 on Win XP SP 2, scripting is disabled). Most of them remove the accessibility information that is added to the image in the source, making it impossible for some disabled users to navigate. If applied to a background, it also has the side effect of making the text transparent too. It's just a big mess, that is very hard to maintain.
This is just some dummy demo text.
This is just some dummy text demonstrating the problem.
This demo represents a page layout.
Look at the background image on the header.
It is supposed to blend properly into the background, and not obscure anything.
Workaround: Use the Alpha Image Loader with a large amount of extra HTML markup. Or use TweakPNG to add a better default background and remove the Gamma correction, then ensure that it does not overlap anything (kinda defeats the purpose of using PNG transparency).
