2 replies [Last post]
Count Rugen
Offline
newbie
Last seen: 18 years 11 weeks ago
Joined: 2004-11-22
Posts: 2
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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.

background-attachment

fixed position

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

revyag
Offline
newbie
Last seen: 18 years 11 weeks ago
Timezone: GMT+1
Joined: 2004-11-18
Posts: 4
Points: 0

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>