CSS background-attachment Property

CSS background-attachment Property

The background-attachment property in CSS determines whether a background image scrolls with the page or remains fixed in place.

1. Syntax

selector {
  background-attachment: value;
}

2. Accepted Values

Value	Description
scroll (default)	The background moves when scrolling.
fixed	The background stays in place while scrolling.
local	The background scrolls inside the element (e.g., scrollable div).

3. Example – Default (scroll) Behavior

.box {
  width: 100%;
  height: 500px;
  background-image: url("background.jpg");
  background-attachment: scroll;
}

✅ The background image scrolls along with the page.

4. Example – Fixed Background (fixed)

.box {
  width: 100%;
  height: 500px;
  background-image: url("background.jpg");
  background-attachment: fixed;
  background-size: cover;
}

✅ The background stays in place, creating a parallax effect.

5. Example – local (Inside a Scrollable Element)

.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto;
  background-image: url("background.jpg");
  background-attachment: local;
}

✅ The background moves when scrolling inside the element.

6. Best Practices

✔ Use fixed for cool parallax scrolling effects.
✔ Use local for scrollable elements.
✔ Combine with background-size: cover; for better visuals.