CSS Background-attachment Property

The background-attachment property specifies whether a background image stays fixed on the screen. Possible values are:

• fixed: background stays in the same place when scrolling.
• scroll: background moves with the rest of content when scrolling.
• local: background moves within the local element when the local element's scroll bar is being moved.

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:

Value	Outer scroll bar	Inner scroll bar
fixed	does not move	does not move
scroll	moves	does not move
local	moves	moves

The example below illustrates the difference between scroll and local:

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.