background-image not statying fixed within scrollable <DIV>

[Smapty]

Ok, what I have is a fixed height and width layer in my page that holds the main content. I have a background radial-gradiant that needs to stay fixed to the top left corner of the layer... even when the content is scrolled up and down.

This works in I.E., but in Netscape/FireFox the last attribute [background-attachment: fixed] repositions the background from the top-left courner of the browser WINDOW and not the LAYER.

.content
{
width: 620px;
height: 325px;
background-color: navy;
background-image: url(/IMAGES/body_gradient.jpg);
border: 2px solid #9999cc;
margin-left: 38px;
color: white;
overflow: auto;
padding: 10px 40px 40px 40px;
background-repeat: no-repeat;
background-position: 0px 0px;
background-attachment: fixed;
}

Now, simply by removing the bg-attachement property, the backgound-image displays as it should in NS 7.1/FF...

.content
{
width: 620px;
height: 325px;
background-color: navy;
background-image: url(/IMAGES/body_gradient.jpg);
border: 2px solid #9999cc;
margin-left: 38px;
color: white;
overflow: auto;
padding: 10px 40px 40px 40px;
background-repeat: no-repeat;
background-position: 0px 0px;

}

...but now in IE the image scrolls up with the content of the division.

How do I get the background to behave correctly in both sets of browsers?

 

[Vragabond]

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').

As you can see, it is IE which does it wrong and FF that is correct. However, the bottom line is that you have two browsers understanding the same property differently. I would simply employ the hack for IE (since all other browsers will act like FF):

.content
{
width: 620px;
height: 325px;
background-color: navy;
background-image: url(/IMAGES/body_gradient.jpg);
border: 2px solid #9999cc;
margin-left: 38px;
color: white;
overflow: auto;
padding: 10px 40px 40px 40px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100px 250px;
}

* html .content {
background-position: 0px 0px;
}

 

[Smapty]

background-position: 100px 250px;

^^^

Why was the positioning modified there? Because... now in FF/NS the background begins at those cordinates from top-corner of the window... putting it in the middle of my element. In IE its rendering without problems. Am I supposed to absolute-postion the background for the sake of FireFox and Netscape??

 

[Smapty]

Did you mean to write this...?

.content
{
width: 620px;
height: 325px;
background-color: navy;
background-image: url(/IMAGES/body_gradient.jpg);
border: 2px solid #9999cc;
margin-left: 38px;
color: white;
overflow: auto;
padding: 10px 40px 40px 40px;
background-repeat: no-repeat;
background-position: 0px 0px;
}

* html .content {
background-position: 0px 0px;
background-attachment: fixed;
}

Because by moving the "fixed" attribute to the second .content the style is rendering fine in both browsers.


By the way, that is that "* html" all about? Can NS/FF not see styles written that way? Would it work for other types of "ie-only" hacks?

Thanks.

 

[Vragabond]

The second declaration is a hack that is read by IE only and ignored by other browsers. That is why we put the "wrong" interpretation of fixed position to IE only declaration because IE interprets that wrongly. If you read (and understood) my first post, you know that when position is fixed, it is fixed according to the viewpoint -- where viewpoint is defined as browser window. So if your element is 100px from the top and 200px from the left of the top left corner of browser window, you need to position that accordingly. In IE, fixed background is positioned according to the element it is in and that is why it 0 0 are correct coordinates. Your solution will produce a scrolling background in any browser other than IE, while mine would position fixed background correctly in all browsers. Since I don't know the layout of your page, I cannot provide you with correct coordinates for the fixed background, but I believe you can do that yourself.