The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. It can be set to scroll or remain fixed.
If you set fixed the background image then the image will not move during scrolling in the browser.
There are three values: scroll
, fixed
, and local
. Its default value is scroll, which causes the element to not scroll with its content.
The local value of this property causes the element to scroll with the content. If we set the value to fixed, the background image will not move during scrolling in the browser.
Syntax
background-attachment: scroll|fixed|local|initial|inherit;
Property Values
The background-attachment
property is specified as one of the keyword values from the list below.
Value | Description |
---|---|
scroll | The background image will scroll with the page. This is default |
fixed | The background image will not scroll with the page. Even if an element has a scrolling mechanism, the background doesn’t move with the element. |
local | The background image will scroll with the element’s contents. |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Example – 1
Using the scroll value of the background-attachment property.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the TheNewTutorial.com.com. This site is developed so that students may learn computer science
related technologies easily. The TheNewTutorial.com.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>
</body>
</html>
Example – 2
Using the fixed value of the background-attachment property.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1> background-attachment: fixed;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the TheNewTutorial.com. This site is developed so that students may learn computer science
related technologies easily. The TheNewTutorial.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>
</body>
</html>
Example – 3
Using the local value of the background-attachment property.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: local;
}
</style>
</head>
<body>
<h1> background-attachment: local;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the TheNewTutorial.com. This site is developed so that students may learn computer science
related technologies easily. The TheNewTutorial.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>
</body>
</html>
Example – 4
Using more than one image.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("https://eywiah.com/wp-content/uploads/2022/01/cropped-fevicon-32x32.jpg"), url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
height: 500px;
border: 4px solid red;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed, scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
</div>
</body>
</html>