"Background-attachment" issue

Problem with background-attachment: fixed in IE7

[sjemms]

Hi all

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.

Thanks

Simon

======================

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.

[swa66]

Welcome [webmasterworld.com] to WebmasterWorld!

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.

Try adding:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->

To see if it fixes the issues you are struggling with.

[Setek]

[edit]

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

div

with a regular background image, then have your scrolling

div

inside it. Requires extra HTML, but if you can't find any other way to do it...

[/edit]

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]

[sjemms]

Just the ticket. I've had to manually set the y value, but put the x value at 50%. Since the header is fixed (206px for the record), it's all working.

Thanks

[Setek]

Haha wicked I was right the first time round :)

Glad it solved your problem, and welcome to Webmaster World!