Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
background-attachment

background-attachment

Specifies whether the background image is fixed in place or scrolls along with the page when the window is scrolled.

Sample Code

div { background-attachment: scroll;}
p { background-attachment: fixed;}

Available Values

Value	Description
scroll	The background scrolls along with the page. This is the default value.
fixed	The background stays fixed even when the page is scrolled.

Browser Preview

<p>The div element below is 500px tall with background-attachment: scroll. Scrolling the page moves the background image as well. This is the default.</p>
<div style="background-image: url(/dics/dictionary-css/img/sample.jpg); background-repeat: no-repeat; background-attachment: scroll; padding-top: 500px; text-align: right;">End of scroll area.</div>

<p>The div element below is 500px tall with background-attachment: fixed. The background image stays fixed when scrolling.</p>
<div style="background-image: url(/dics/dictionary-css/img/sample.jpg); background-repeat: no-repeat; background-attachment: fixed; padding-top: 500px; text-align: right;">End of scroll area.</div>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions.

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5+ ○

2 and below ×

Mobile

iOS Safari

3.2+ ○

2 and below ×

Android Browser

4.4+ ○

3 and below ×

Chrome Android

Latest ○

Same support as desktop.

Firefox Android

Latest ○

Same support as desktop.

※ Version data is based on MDN.

Notes

Specifies whether the background image is fixed or scrolls with the page.

In IE6, setting background-attachment: fixed on elements other than body does not fix the background. In IE7, the background may not be fixed correctly depending on the HTML structure.

Some Android 2.x and Android 4.x stock browsers have a bug where background-attachment: fixed causes the background not to render. If you need a fixed background on mobile, consider using the position property instead of background-attachment: fixed.

If you find any errors or copyright issues, please contact us.

Home