How should I use transparent pngs in IE 6 over a background-repeat?

Question

The code below has a repeating background image "thinline.png". On top of that are 4 layered transparent PNGs: cardshadow.png, steel.png, startjobapplicationshadow.png and startapplication.png

My goal is to make this code look good in IE6 without messing up other browsers. This feature of IE is widely documented but I have not been able to get it working. Please give me some ideas or examples to help me solve this.

Thanks. Mike

The Code:

  <div style="height: 333px; width: 100%; position: absolute; top: 68px; background-image:url(Resources/thinline.png); background-repeat:repeat-x; ">
<div style="position: absolute; height: 300px; width: 215px; top: 15px; right: 50%; margin-right: -390px; z-index: 2; ">
<img src="Resources/steel.png" style="position: absolute; top: 0px; z-index: 3;"/>
<img src="Resources/cardshadow.png" style="position: absolute; top: 0px; margin-top: -8px; margin-left: -10px; z-index: 2">
<img src="Resources/startjobapplication.png" style="margin-left: -65px; position: relative; top: 258px; left: 50%; z-index: 5; display: block;"/>
<img src="Resources/startjobapplicationshadow.png" style="margin-left: -67px; margin-top: -20px; position: relative; top: 258px; left: 50%; z-index: 4; display: block;"/>

Answer 1

I haven't tested this out but you might try this. Apply this class to the appropriate images.

 img.transparent {
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
 }

I don't have a copy of IE6 available so I can't make sure this works.

I also found this which appears to solve the problem with JS. After reading a bit more the last solution is probably the best way to deal with it.

Answer 2

Take a look at IE7 by Dean Edwards. It's a javascript library for Internet Explorer 6 that makes transparent pngs work correctly, as well as fixing css bugs and adding support for additional css features. I've used this library in the past with some success (It's easier than adding IE-specific css hacks.). However, the page may briefly look incorrect while loading.

Answer 3

there is a problem with using Microsoft's AlphaImageLoader for backgrounds. They basically will not repeat.

There are 2 solutions:

1. If your image can be stretched - then use appropriate setting in AlphaImageLoader: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/file.png', sizingMethod='scale')

2. If your image cannot be stretched then you should use JavaScript solution like IE PNG Fix v2.0 Alpha 3. Note it uses Microsoft's .HTC files which has to be sent to browser with specific (text/x-component) meta-type, otherwise it won't work.

Answer 4

For the background image, if you are not using inline styles in your actual code and depending on your background image and acceptable loss of quality, you can save the png as a gif and use

* html .divclass {background-image:url(Resources/thinline.gif);}

with .divclass being the class name or #id of the div.

The * html will override the background image for ie6.

Answer 5

Use DD_belatedPNG.