Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

"Background-attachment" issue

Problem with background-attachment: fixed in IE7

4:31 pm on Dec 10, 2008 (gmt 0)

New User

10+ Year Member

joined:Dec 10, 2008
posts: 2
votes: 0

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.




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.

7:59 pm on Dec 10, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

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"

To see if it fixes the issues you are struggling with.
1:23 am on Dec 11, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


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]

2:56 am on Dec 11, 2008 (gmt 0)

New User

10+ Year Member

joined:Dec 10, 2008
votes: 0

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.


3:06 am on Dec 11, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
votes: 0

Haha wicked I was right the first time round :)

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


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members