ie6 css background image problem

Question

I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.

In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.

.error
{
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}

IE7 / FF3.5

IE6

Answer 1

You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.

Read the comments on this page .

The documentation of your png transparency fix will probably cover this.

I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.

Answer 2

If you're using the AlphaImageLoader filter , make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale .

Answer 3

我发现Belatedpng是解决此问题的最佳脚本： http : //www.dillerdesign.com/experiment/DD_belatedPNG/

Answer 4

set actual width and height for the background image and background-position.

    .error
{
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
    background-position:left;
    width:251px; 
    height:72px; 
    background-repeat:no-repeat;
}

here width and height are actual size of the error.png image. hope it helps.