What is the difference between background-attachment : scroll and local?

css

Solution

From the spec:

`fixed`: The background is fixed with regard to the viewport. (...) Even if an element has a scrolling mechanism (...), a ‘fixed’ background doesn't move with the element.

`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, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them. (...)

`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.)

Demos: fixed, local, scroll.

Problem

Original source