The background-attachment
property defines how to move the background image relative to the viewport.
background-attachment: scroll | fixed | local;
scroll
body {
background-image:
url("https://scanskill.com/wp-content/uploads/2022/02/cropped-Screen-Shot-2022-02-15-at-13.25.57-1.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 200px 100px;
border: 1px solid red;
}
fixed
body {
background-image:
url("https://scanskill.com/wp-content/uploads/2022/02/cropped-Screen-Shot-2022-02-15-at-13.25.57-1.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200px 100px;
border: 1px solid red;
}
scroll: It will make the background image scroll with the page. (Default value)
fixed: It will make the background image fixed at its position and not scroll with the page.
local: It will make the background image scroll with the element's contents.