Definition:
CSS background-attachment specifies a background image can be scrolled, fixed, or inherit.
Property Values are:
background-attachment: scroll | fixed | inherit;
Here is the original image. Let’s use this image as a background-attachment specification:

Syntax:
/*Set background-attachment to scroll*/
background-attachment: scroll;
/*Set background-attachment to fixed*/
background-attachment: fixed;
/*Set background-attachment to inherit*/
background-attachment: inherit;
1) background-attachment: scroll;
Definition:
This is a default background-attachment property. Here, the background image will scroll with the page.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background_attachment{
background-image: url("https://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 50px;
background-attachment: scroll;
}
</style>
</head>
<body id="background_attachment">
<h3>The CSS background-attachment Property</h3>
<br>
<p>CSS background-attachment specifies a background image can be scrolled, fixed or inherit.</p>
<br>
<p><strong>Note: </strong> Try to resize your opened browser, if you don't see any scroll bar. </p>
<br>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
</body>
</html>
Note: Replace the above “image.png” with your local or server image location.
Result:

2) background-attachment: fixed;
Definition:
Here, the image will not scroll with the page. Click “TRY IT YOURSELF” to see the result and try to scroll up and down. The image will remain in a fixed position in the right top corner. You can define your own position for the image.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background_attachment{
background-image: url("image.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 50px;
background-attachment: fixed;
}
</style>
</head>
<body id="background_attachment">
<h3>The CSS background-attachment Property</h3>
<br>
<p>CSS background-attachment specifies a background image can be scroll, fixed or inherit.</p>
<br>
<p><strong>Note: </strong> Try to resize your opened browser, if you don't see any scrollbar. </p>
<br>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
</body>
</html>
Result:

3) background-attachment: inherit;
Definition:
Inherits this property from its parent element. See below for source code and output. You can try it yourself by clicking below “TRY IT YOURSELF” button.
<!DOCTYPE html>
<html>
<head>
<style>
#background_attachment{
background-image: url("image.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 50px;
background-attachment: inherit;
}
</style>
</head>
<body id="background_attachment">
<h3>The CSS background-attachment Property</h3>
<br>
<p>CSS background-attachment specifies a background image can be scroll, fixed or inherit.</p>
<br>
<p><strong>Note: </strong> Try to resize your opened browser, if you don't see any scrollbar. </p>
<br>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
</body>
</html>
Result:

Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)