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
localmovesmoves

The example below illustrates the difference between scroll and local:

Scroll
Background-attachment:scroll. The background image does not move with the scroll action

Local
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 © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.