CSS Background-attachment Property
The background-attachment property specifies whether a background image stays fixed on the screen. Possible values are:
Below are two examples, the first showing how fixed looks like, and the second showing how scroll looks like.
Background-attachment scroll vs local
The distinction between scroll and local values can be confusing. In fact, when there is only a single scroll bar on the page, a scroll setting and a local setting behaves exactly the same because, under those circumstances, local refers to the entire space within the scrollable element. The difference between these two values comes when there are at least two scrollable areas on the page, one inside the other. The table below shows how different background-attachment value behaves when there are two scrollable areas:
The example below illustrates the difference between scroll and local:
Background-attachment:scroll. The background image does not move with the scroll action
Background-attachment:local. The background image moves with the scroll action.
When you move down the entire section by scrolling on the scroll bar that spans both the Scroll and Local windows, you'll find the background image (the 1Keydata icon) moves in both the Scroll window and the Local window. The difference is when you scroll the individual elements: When you scroll on the Scroll window, you'll find the background image does not move. When you scroll on the Local window, you'll find the background image moves with the scrolling.