Mon, 2004-11-22 05:44
I have defined the following div:
div #main {
height: 200px;
background: #ccc url(image.jpg) top right no-repeat;
overflow: auto;
}
In IE, when the text overflows the area, the scrollers appear and when I scroll, the background image scrolls with the text, the way it should. In Firefox, Safari & Netscape though, the image stays fixed and the text scrolls over it.
If I put 'fixed' in the background declaration, then the image stays fixed in IE, but then in Firefox, Safari and Netscape, rather than being aligned to the top right of the div, the background image aligns to the top right of the browser window. When I resize the browser window, the image in this div moves with the browser window.
I want a fixed background image but don't know why the image doesn't align properly with the div I have assigned it to.
Can anyone provide an insight to why this is happening?
Mon, 2004-11-22 10:12
#1
background images
For {background-attachment: fixed;} and {position: fixed;}, the reference is the viewport. Compare to {position: absolute;} where the reference is the nearest positioned ancestor.
cheers,
gary
Mon, 2004-11-22 10:39
#2
background images
Try something like this:
css:
#mcont{
height:200px;
overflow: auto;
}
#main {
background: #ccc url(image.jpg) top right no-repeat;
}
html
<div id="mcont">
<div id="main">
</div>
</div>