Firefox CSS problem (aligning background to div)

Yoast

05-16-2005, 11:29 AM

Hi,

I am trying to add a background image to a div.

Internet Explorer does display the background correctly, but Firefox aligns the background not to the div, but to the browser screen. Does anyone know what I am doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<link title="stylesheet" href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="content"></div>
</body>
</html>

And here is the relevant CSS code:

.content {
position: absolute;
top: 20px;
left: 20px;
background-image: url(images/zonnebloeml.jpg);
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
width:515px;
height:500px;
border: 1px solid black;
overflow: auto;
}

I hope someone here knows how to fix it!
TIA

coothead

05-16-2005, 12:08 PM

Hi there Yoast,

and a warm welcome to these forums. :)

try it like this...
.content {
position: absolute;
top: 20px;
left: 20px;
background-image: url(images/zonnebloeml.jpg);
background-attachment:scroll !important;
background-attachment: fixed;
background-position:bottom left ;
background-repeat: no-repeat;
width:515px;
height:500px;
border: 1px solid black;
overflow: auto;
}

coothead

Yoast

05-16-2005, 12:23 PM

Hey, That did it!

Thanks a lot. But... What is it doing actually?

It looks like a hack... Can you enlighten me?

coothead

05-16-2005, 12:35 PM

Hi there Yoast,

I suppose it is a hack....an IE hack. :)

It would work OK in Firefox, Opera and Mozilla like this...
.content {
position: absolute;
top: 20px;
left: 20px;
background-image: url(images/zonnebloeml.jpg);
background-position:bottom left ;
background-repeat: no-repeat;
width:515px;
height:500px;
border: 1px solid black;
overflow: auto;
}
But as IE requires...

background-attachment: fixed;

...Firefox etc. requires this...

background-attachment:scroll !important;

coothead

Yoast

05-16-2005, 12:52 PM

Ah, now I understand.
I already noticed that Firefox did not need the background-attachment.

I love MSIE. It makes life so much more interesting. All would be too damn straightforward otherwise (and possibly this forum would not exist ;-) ).

Thanks again.