CSS Background-attachment Property

CSS Tutorial  >  Background   >   Background-attachment

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.

body {background-attachment: fixed;
  background-image: url("yp.jpg");
  background-repeat: no-repeat;
body {background-attachment: scroll;
  background-image: url("yp.jpg");
  background-repeat: no-repeat;

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:

ValueOuter scroll barInner scroll bar
fixeddoes not movedoes not move
scrollmovesdoes not move

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.

Next: CSS Background-Color

Copyright © 2022   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact