IE PNG Transparency Fix

More combined Internet Explorer PNG Transparency Fix for pure images and CSS backgrounds.

Activate the PNG-Fix

Add this code in your HTML Head.


      <head>

  <!--[if lte IE 6]>

      <style type="text/css">

      img, .pngtrans { behavior:url(YOUR_FULL_ABSOLUTE_PATH/hm_iepngfix.htc) }

      </style> 

  <![endif]-->

      </head>

If you have multiple domains use on the same site, then use the following code.


      <head>

      <!--[if lte IE 6]>

   <script typle="text/javascript">

    document.write('<style type="text/css">img, .pngtrans { behavior: url(http://'+window.location.hostname+'/YOUR_RELATIVE_PATH_WITHOUT_HOSTNAME/hm_iepngfix.htc) }</style>');

  </script>

<![endif]-->

      </head>

Configuration

In the file hm_iepngfix.htc you can set the file/CSS-Class suffix.. Default value is _trans.

var imgSuffix = "_trans";

With this attitude the followings are taken into at only pure pictures. The CSS background images are not dependently from this setting, sepearte only from upper CSS property (.pngtrans).

<img src="myPicture_trans.png" />
<img src="myPicutre.png class="_trans" />
<div class="pngtrans" style="background-image:url(myPicture.png)">...</div>

Examples (look in IE5 and IE6)

Without PNG-Fix (here have the picture in IE5/6 a grey background color and no transparency)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

PNG-Fix with pure images - [*_trans.png]


  	HTML:

		<img src="pic_trans.png" height="113" width="135" />

PNG-Fix as CSS background image [.pngtrans]

HTML:

    <p class="demo_css pngtrans">....</p>

    

    CSS:

    .demo_css {

      background:#fc0 url(pic.png) no-repeat top left;

    }

PNG-FIX with CSS-Class for pure images [class="_trans"]

<img src="pic.png" class="_trans" height="113" width="135" />

Restrictions

if you call in your Stylesheet directly with "img {}" then does this not longer works after rendering images. The "img" is replaced after Fix with "span". But the PNG-Fix add a special CSS-Class.
Solution:
CSS: img, .pngImage { ...your properties }

You can not use CSS background images with property background-repeat and background-postition. These values are not taken over, because the background picture becomes a filter.