Background Attachment Property
Last updated: 2026-09-13
background-attachment Background Attachment Property
background-attachment decides whether a background image scrolls with the page. The default scroll means the background scrolls with the element's content; fixed pins the background to the viewport, producing a parallax effect; local makes the background scroll with the element's internal content. It is often used for visual effects.
| Category | |
|---|---|
| Initial Value | scroll |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
background-attachment: scroll | fixed | local;⚙️ Values
| Value | Type | Description |
|---|---|---|
scroll | fixed | local | Keyword | Background scrolling behavior |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-attachment | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： The fixed value pins the background to the viewport, commonly used to create parallax scrolling effects.
Warning： background-attachment: fixed performs poorly on mobile, and some mobile browsers ignore the value entirely.
❓ FAQ
QWhat is the difference between scroll, fixed, and local in background-attachment?
AThey differ in what the background is positioned relative to. scroll (the default): the background is positioned relative to the element and scrolls with it. fixed: the background is pinned to the viewport and stays still while the page scrolls, creating a parallax effect. local: the background is positioned relative to the element's inner content, so it scrolls when the element's internal content scrolls, e.g. in an overflow: auto container.
QHow do I create a parallax scrolling effect?
ASet background-attachment: fixed, and since the background is pinned to the viewport, the foreground content moves while the background stays still — that is the parallax feel. The classic approach is giving several sections different background images with fixed so backgrounds swap as you scroll. Note that iOS and some mobile browsers ignore fixed, so you may need a separate treatment.
QWhy doesn't background-attachment: fixed work on mobile?
AMainly for performance. Mobile browsers like iOS Safari degrade fixed backgrounds to scroll to save memory and keep scrolling smooth, so the background scrolls with the content. Workarounds: use an ordinary full-bleed background on mobile, or a JS parallax library (such as Rellax) built on transform, and enable fixed only on desktop.
QWhen should I use the local value?
Alocal suits containers with their own scrollbar, such as overflow: auto chat windows, code blocks, or data lists. With background-attachment: local the background scrolls along with the inner content instead of staying glued to the container, which visually mimics a 'paper texture that belongs to the content'.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
