In this section, we will learn what the background-attachment property is and how to use it in CSS.

Click here to run the example of background-attachment property.

CSS background-attachment Property Definition and Usage

When we set an image for the background of an element, if we scroll the page, both element and its image will scroll together.

But CSS provided a property named `background-attachment` by which we can stop the background image of an element from scrolling if we scrolled its element (still the element itself scroll but not its background image).

CSS background-attachment Property Syntax

background-attachment: scroll|fixed|local|initial|inherit;

CSS background-attachment Property Value

The values for `background-attachment` property are:

• fixed: using this value, the background image of an element will stop scrolling.
• scroll: This is the default value and, if used, the background image of an element will scroll along its element.
• local: Using this value, the background image will scroll as the content within the element scrolled.

Note: the two global values “initial” and “inherit” can be used as well.

Example: background-attachment in CSS

See the Pen background-attachment in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: background attachment fixed

See the Pen background attachment fixed by Enjoy Tutorials (@enjoytutorials) on CodePen.