CODEWITHSUNDEEP
internet-explorer-6css
this. __curious_geek
this. __curious_geek

Reputation: 43207

ie6 css background image problem

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

alt text

IE6

alt text

Upvotes: 1

Views: 6732

Answers (4)

matpol
matpol

Reputation: 3074

Belatedpng is the best script I have found for this problem: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Upvotes: 0

Paulraj
Paulraj

Reputation: 3397

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.

Upvotes: -1

kitsune
kitsune

Reputation: 11643

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.

Upvotes: 4

strager
strager

Reputation: 90012

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

Upvotes: 2

Related Questions