backgrounds and scrolling (background-attachment:fixed, overflow:scroll)

In the test cases a box (with gray border, repeated squared background) has an overflowing child (with pink border, no-repeat centered red squared background). In the fourth example the parent has overflow: visible, in the others it has overflow: scroll. In the first case the child has background-attachment: fixed, according to the spec the background should be 'anchored' to the viewport (its positioning has been corrected to maintain it the 'center' of the element). To show that the background is fixed with the viewport and not with the parent, decrease (if necessary) the browser's window height so that the page can be scrolled vertically and do that. Doesn't work in IE6/Win, it ignores background-attachment: fixed here.

In the first two cases in IE7- the parent background moves with the scrolling of the element. This doesn't happen in other browsers. In the third case there is background-attachment: fixed on the parent element, this makes the parent (gray) background no more moving with the scrolling in IE7-. In IE6 this makes the parent background works exactly as in other browsers when they have background-attachment: scroll, i.e. it is sort of attached to the parent border (which is external to the scrollbars) and do not move with the scrolling of the element, but moves with the scrolling of the viewport, together with the whole element. In IE7 it becomes anchored to the viewport (background-attachment: fixed is now correctly supported). As a consequence it seems that the 'standard' behavior of background-attachment: scroll for an element with overflow: scroll cannot be obtained in IE7.

CSS tests home