2

I'm trying to make the background image in divs scrollable (not fixed).

I've tried copying example 2: (usually works... e.g. IE9)

http://www.codertools.com/css_help_guide/css_background-attachment.aspx

Here is my version: (sometimes doesn't work)

http://sky-walker.net/temp/panning/panning2.html

I've basically copied and pasted the code (except for the path of the image file) but the background image stays fixed if I scroll the div...

I want the background image to scroll, like in example 2.

My problem happens in IE9 (Windows 7) and Chrome 12 (Windows 7 and Windows XP) but not IE6 (Windows XP). In Chrome 12 for Vista the first link (example 2) doesn't work either.

Luke Wenke
  • 1,149
  • 2
  • 23
  • 43
  • Both examples look the same to me. What browser are you using? IIRC it doesn't work in all browsers (meaning IE of course). – Martin Tournoij Jul 31 '11 at 05:37
  • It's only worked for me so far on IE8 - FF5 and Chrome both fail. Both examples in the first page are behaving the same way. Seems `background-attachment: scroll;` (which is usually the default property anyways) won't work on the div (behaves like `fixed`), but does work on `body` for instance. Interesting - not sure why! – Wesley Murch Jul 31 '11 at 05:52
  • @Tim: When you say "renders fine in FF5", do you mean that the background image is indeed scrolling, and not fixed? – Wesley Murch Jul 31 '11 at 05:57
  • @Wesley Murch - my bad. The background image is indeed fixed in FF5 (I looked at the wrong example initially and used that for my comparison). So to clarify, it is not working in FF5 *or* IE9 (64-bit). – Tim Jul 31 '11 at 05:59
  • I don't understand why it sometimes works in the first link. Also in the following link it seems to say that IE supports background-attachment... http://www.w3schools.com/cssref/pr_background-attachment.asp – Luke Wenke Jul 31 '11 at 09:15

2 Answers2

3

Why should the background image scroll? Both your examples work the same for me.

CSS2 specs:

If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background does not move with the element, and a 'scroll' background does not move with the scrolling mechanism.

CSS3 specs:

scroll
The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

The background does scroll with the viewport though.

Edit: I think what you really want is CSS3's local background-attachment:

local
The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents.

user123444555621
  • 148,182
  • 27
  • 114
  • 126
  • Interesting... in the first link I provided, the "fixed" example is fixed if you scroll the entire webpage... (example 2 scrolls with the local viewport for many browsers though such as IE8). "local" seems to be what I'm looking for though it might not be supported in some older browsers. – Luke Wenke Aug 01 '11 at 06:14
  • I think the problem is that CSS2 browsers (e.g. IE6) don't support "local" and for them, "scroll" acts like "local". CSS3 browsers treat "scroll" differently... I think that some browsers are treating example 2 like a CSS2 webpage and so treat "scroll" like "local". In the following link, IE8 treats the scrolling like it does in example 2... http://sky-walker.net/temp/panning/panning3.html It thinks it is CSS2 because I removed "!DOCTYPE html" – Luke Wenke Aug 01 '11 at 06:28
  • Yea, probably. Browsers are very creative when it comes to switching between different standards ;) – user123444555621 Aug 01 '11 at 08:29
1

I'm posting this here because I recently had a situation that required me to "trick" older browsers into producing background-attachment: local-like behavior.

As this table points out, IE8 and Firefox don't support local, while IE6-7 get it right for the wrong reasons. With a little jQuery trickery (which can be rewritten in pure JavaScript by someone sufficiently determined), we can detect whether local is supported on the element and simulate the scrolling background if it isn't:

HTML:

<div id="main">
...
</div>

CSS:

#main {
    background-attachment: local;
    overflow: auto;
    position: relative; /* IE7 wants this for unrelated reasons */
    ...
}

jQuery:

if ($('#main').css('background-attachment')!=="local") { 
    // will return the default value of 'scroll' in older browsers
    $('#main').on('scroll',function() {
        $main = $(this);
        $main.css({ 
            'background-attachment': 'fixed',
            'background-position': '0px '+(0-$main.scrollTop())+'px' 
             // firefox doesn't support 'background-position-y'
        });
    });
}; // end if

CSS local is used if it's supported, and the JavaScript hack is only added if it's not.

See this question for why I had to add position: relative in the CSS.

Community
  • 1
  • 1
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • Do you have a demo for this? I have a question with a bounty on it related to this issue and I think you could solve it http://stackoverflow.com/questions/21164303/background-attachment-local-how-to-have-child-elements-with-background-colours – 2ne Jan 18 '14 at 23:03