Limited support Useful when background-attachment adds emphasis or visual refinement without becoming necessary for understanding content.

background-attachment

The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-attachment
1
12
1
1
18
3.2
fixed
1
12
2
15.4
18
5
local
1
12
25
15.4
18
15.4
multiple backgrounds

Multiple backgrounds
1
12
3.6
1.3
18
3.2
scroll
1
12
1
1
18
3.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
  • This feature was removed in a later browser version (14)
Implementation note
  • `fixed` is recognized but has no effect. See related bug 219324.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • `fixed` is recognized but has no effect. See bug 275247.
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
  • This feature was removed in a later browser version (13)
Implementation note
  • `local` is recognized but has no effect. See bug 219324.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
  • This feature was removed in a later browser version (13)
Implementation note
  • `local` is recognized but has no effect. See bug 219324.
  • If `-webkit-overflow-scrolling: touch` is set, then `local` has no effect.

Syntax

CSS 
.parallax {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-size: cover;
}

Live demo

Fixed(pararaks)

CSS Fixed(pararaks) demo.

PreviewFullscreen

Scroll(normal)

CSS Scroll(normal) demo.

PreviewFullscreen

Local(insidepartscroll)

CSS Local(insidepartscroll) demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use background-attachment to add depth, masking, blending, or special treatment to supporting visuals.

  • Brand expression

    Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.

Cautions

  • Heavy effects can hurt performance or readability on lower-end devices.
  • Do not use visual effects as the only way to communicate meaning or state.

Accessibility

  • Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
  • Visual polish should never reduce content legibility.

Related links