Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
I've got a problem with background-attachment. It seems to be causing the majority of the issue in IE, but it's not working entirely right in the other browsers.
I want to create a website with the main content in a <div> that scrolls. As a background image, I want a picture that doesn't scroll when the page scrolls. Therefore, I want to use 'background-attachment: fixed'. However, when I use this, it places the image at the top-left of the whole screen, not of the <div>.
Anyone got any suggestions how I can position the image within the <div> whilst using 'background-attachment: fixed'? I've made sure that all the parent <div>s have position: relative, but that's not working.
PS. By using 'background-attachment: scroll', I can get it to work properly (ie, the image is in the div and doesn't scroll) in Firefox/Opera, but no in IE7.
background-position:fixed is a strange one (and oft misunderstood it seems): it puts the image in a fixed position in relation to the viewport. Hence you can easily scroll the block away from the background.
It also has a strange way to position the background relative to the viewport instead of the element. The standard [w3.org] clearly says:
"If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding box."
"background-attachment: fixed" is for when you use the browser's scroll bars, not scroll bars that come from a div with overflow:scroll.
That same standard explains it: "Note that there is only one viewport per view. If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background doesn't move with the element, and a 'scroll' background doesn't move with the scrolling mechanism."
Background-attachment:scroll is the default, there is no need to specify it.
Basically the behavior you're seeing from firefox/opeara (and safari) etc. is the only correct one.
Background positioning doesn't mention any parent's need for having position, so I'd remove all the position:relative statements.
IE8.js might fix some of the IE problems if you accept a scripted solution.
<!--[if lt IE 8]>
Actually, I might have misunderstood what the OP was getting/wants.
Shrug. Now I'm confused.
But I do have a theory.
Have a regular
with a regular background image, then have your scrolling
inside it. Requires extra HTML, but if you can't find any other way to do it...
swa66, it sounds like it's doing what he wants, he just wants it to be positioned somewhere else to begin with?
If that's the case, simply add:
background-position: [x-value] [y-value];
Tip: you can also combine the background properties, so it could say something like:
background: #fff url('bg.jpg') no-repeat fixed 50% 50%;
[edited by: Setek at 1:46 am (utc) on Dec. 11, 2008]