Webzstore
The CSS 'background-attachment' property specifies whether a background image should scroll with the content or be fixed about the viewport. This property can be used to create various effects, such as a parallax scrolling effect or ensuring that a background image remains static as the user scrolls through a webpage.
CSS 'background-attachment' Property Example
See the Pen CSS 'background-attachment' Property by Webzstore (@webzstore) on CodePen.
The 'background-attachment' property offers creative control over how background images interact with page scrolling, allowing for diverse design strategies that can enhance a website's aesthetic and user experience.
Browser Support For 'background-attachment' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-attachment for the full compatibility details, including mobile browsers.
CSS Syntax of the 'background-attachment' Property
background-attachment: scroll | fixed | local | initial | inherit;
Usage of the 'background-attachment' Property
Use 'background-attachment' to control the scrolling behavior of background images. It's beneficial for adding visual depth to a webpage or creating specific visual effects that enhance the user's experience. For instance, a fixed background image can create a sense of immersion, while a scrollable background can maintain context as content moves.
Property Values of the 'background-attachment' Property
- Scroll: The default value. The background image scrolls with the rest of the page.
- Fixed: The background image is fixed with regard to the viewport, creating a parallax effect as the user scrolls.
- Local: The background image scrolls with the element's contents.
- Initial: Resets the property to its default value (scroll).
- Inherit: Inherits this property from its parent element.
