Background-attachment - CSS Property
Summary of characteristics of the background-attachment property
scroll | fixed | localscrollDiscrète: during an animation, the background-attachment property passes from one value to another without transition.Per grammar: serialization in the order of syntax.Syntax diagram of background-attachment.
background-attachment property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
Description of the background-attachment property.
background-attachment defines what the background image is "attached" to, in other words, is this background image fixed? Does it scroll with the page?
Or does it scroll with the content of the element (when the element has a scrollbar)?
This property is often applied to the body tag but is also useful for many other tags: div, span, etc.
If no background image is set, this property has no effect.
For a general explanation on how backgrounds work, check out the page general information about backgrounds.
Values for background-attachment.
- background-attachment: scroll;
scrollis the default value forbackground-attachment.
The background is attached to the element: it moves with the element but stays fixed if the element's content scrolls.
- background-attachment: fixed;
The background never scrolls, which is pretty annoying when it's only visible in one element and the page is scrolling.
- background-attachment: local;
The background is attached to the element's content: it scrolls with the element's content, and therefore also with the element itself if it moves.
- background-attachment: local, fixed, fixed...;
This syntax of
background-attachment, which includes a series of comma-separated values, can be used when multiple backgrounds have been set bybackground-image. Each value applies to one of the backgrounds, in the order defined bybackground-image. For more details on multiple backgrounds, check out the page multiple backgrounds. - background-attachment: initial; (
scroll) background-attachment: inherit; background-attachment: revert; background-attachment: revert-layer; background-attachment: revert-rule; background-attachment: unset;Links to the presentation of these different values:
initial,inherit,revert,revert-layer,revert-rule,unset.
Access the background-attachment property via a program
With Javascript, change the value of background-attachment.
In JavaScript, here's how to change the value of background-attachment for the el element.
To refer to the property, JavaScript offers a syntax with the typical CSS notation, in kebab-case (a dash to separate words),
or another syntax with camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['background-attachment'] = 'fixed';
// or
let el = document.getElementById('id');
el.style.backgroundAttachment = 'fixed';
With Javascript, read the value of background-attachment.
This code example returns the value of background-attachment if it has been set with the style attribute of the element in the HTML code.
The code won't work if the property was set via a CSS selector.
let el = document.getElementById('id');
el.style['background-attachment'] = 'fixed';
// or
let el = document.getElementById('id');
el.style.backgroundAttachment = 'fixed';
With Javascript, read the computed value of background-attachment.
The computed value is always defined: it will be either the value assigned to background-attachment for this element, via the style attribute
or via a CSS selector, or an inherited value, or even the initial value.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-attachment');
Read or modify the value of the background-attachment property with JQuery.
// Read the value:
$('#id').prop('background-attachment');
// Write the value:
$('#id').prop('background-attachment', 'fixed');
$('#id').prop('{background-attachment': 'fixed'});
Read the computed value of the background-attachment property with JQuery.
let value = $('#id').css('background-attachment');
Test it yourself.
The buttons below apply the entered value to the background-attachment property and then show either the value as it was applied or the computed value.
In the case of the background-attachment property, it will be the same thing, unless you enter an incorrect value. In that case, the assigned value will
be null and the computed value will be reset to the property's initial value.
Simulator.
To clearly see the effect of the different values of background-attachment, scroll through this page and also the content in the area below using its scroll bar.
Example: a village can have a mountainous background.
Browsers compatibility with background-attachment.
The background-attachment is well recognized by all modern browsers.
background-attachment property.Notes:
(1) Does not support the fixed value for the background-attachment property.
Supports the local value only if rounded corners are defined on the element.
background-attachmentproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
Safari
Safari sur IOS
Samsung Internet
KaiOS Browser
Opéra mini
Historic of the background-attachment property..
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
Regardingbackground-attachmentFirst definition of thebackground-attachmentproperty.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingbackground-attachmentTaking into account theinheritvalue.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingbackground-attachmentAdding thelocalvalue.
Multiple backgrounds possible.August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation. -
CSS Backgrounds and Borders Module Level 4
Level 4 of the specification introduces logical values that depend on the writing mode.
Regardingbackground-attachmentNo change regarding thebackground-attachmentproperty.November 25, 2025Working Draft.
See also, about backgrounds.
The specification "CSS Backgrounds and Borders Module" of W3C covers everything about backgrounds and borders, which includes quite a few properties:
Properties:
