background-attachment | Frontend Practical Guide

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

Overview

The background-attachment CSS property sets whether an element's background image or gradient moves as the element scrolls.

Feature	Desktop				Mobile
Feature	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)

CSS

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

CSS Fixed(pararaks) demo.

CSS Scroll(normal) demo.

CSS Local(insidepartscroll) demo.

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.