Transparent PNGs in Internet Explorer 6.0

Natively Microsoft’s Internet Explorer 6.0 doesn’t display PNGs
correctly. But if you want to use graphics with transparency and
anti-aliasing, other formats don’t work.

Used as value of CSS property ‚filter‘ (implemented in IE since version
5.5) the AlphaImageLoader helps to fix this problem for background-images.

 

filter: progid:DXImageTransform.Microsoft.filtername(attribute='value'[, ...]);

With the following three attributes developers can configure how the images are displayed:

 

• src: path to image that should be displayed. If you load your
  stylesheets from an external file, you have to define the path relative
  to the page into which you load the CSS and not relative to the
  stylesheet file..
• sizingMethod: defines how the image will be scaled
• crop: doesnt’t change size of container and image
• image: scales container size and adapt to image size. If the
  container contains text, the text will be cut. (default)
• scale: scales image adapted to container size
• enabled: activates or deactivates the filter
• true: filter is activated (default)
• false: filter is not activated

 

With conditional comments it’s possible to define special CSS blocks
that only work for Internet Explorer, i.e.:

 

<style type="text/css">
#layer {
     background-image:url(bild.png);
}
</style>

<!--[if IE 6]>
<style type="text/css">
#layer {
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale');
     background: none;
}
</style>
<![endif]-->

This defines the same style twice. The first definition is used by all
browsers. If the browser is an Internet Explorer 6, the second block
which mainly contains the filter CSS property for the IE extends the
first. In addition, the ‚background‘ is set to ’none‘ to disable the
general background definition.

 

If you use the AlphaImageLoder in the style attribute of an html tag,
you can overwrite the img src attribute:

<img src="blank.gif" style="width: 100px; height: 100px;
    filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />