ie6 Png Transparency

ie6 can will not show the transparent background of a .png file. Why? Because ie6 sucks!

Creating a transparent png that renders in ie6 using a CSS hack/trick:

  1. Open your stylesheet and find the id where the png background image is or where it will go
  2. Since you are calling the image as a background ( ex. background: url(…) ; ) you must first change the background to “none”. This what tricks ie6:

background: none;

  1. Then add the following code, substituting png location:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”png location”)

Example of what the CSS trick looks like:

#something {
background-image: url(“png url”);
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”png url “);
}

Final notes:

As you see above I also have added the code:   background-image: url (“png url “) no-repeat;

Internet explorer 6 ignores this command and so the png can still render on Firefox and higher IE browsers. However, many websites are coded so that you use a different style sheet for ie6 altogether, so you may not need this.

PS: ie6 still sucks.

Join Firefox