CSS Properties; Background Attachment
The CSS background attachment is used to specify whether the background image is fixed or scrolls along with the rest of the page in the browser window.
It has three values which are scroll, fixed, and local. The standard value of this property is a scroll which causes an element not to scroll with its content. On the other hand, the local value causes an element to scroll with its content. But if the value is set to a fixed value, the background image will not move when scrolling through the page.
With this property, we can specify multiple background images, separated by commas, and select different values for each background image. Every image will match the corresponding value of this property. Please note that while working with background attachment you need to know how to properly set background using CSS. Take a pick at it
Property Values of Background Attachment
Below, the values of the CSS background attachment property are further explained.
Scroll: This standard value prevents the element from scrolling with the contents but allows it to scroll with the page.
Fixed: With this value, the background image does not move with the page, and even the page has a scrolling mechanism. It makes the image stuck in one place even when the rest of the document moves.
Local: With this value, the background image scrolls with the content of the element if it has scrolling mechanisms.
Initial: This returns the property to its standard value.
Inherit: This inherits the property from its original element.
Below are some examples to aid our understanding.
First Example —Using The Scroll Value
In this first example, we use the background attachment property's scroll value, which is the standard behavior. This makes it possible for when a page is scrolled, the background scrolls with it.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property example
</title>
<style>
#example {
background-image: url("cat.png");
font-size: 35px;
border: 4px solid black;
color: black;
background-position: center;
background-color: orange;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;example</h1>
<p> Important information that will make you smile.</p>
<div id="example">
<p>
Hello, people of the world. I present to you a revolution. We are "Hub to Learn" and devoted to your knowledge. Technology is fast changing the world, and we love helping you become a part of that change. So, we stack up knowledge for you in order for you to change the world. Get it?
Second Example - Using The Fixed Value
In this example, we are using the fixed value of the background attachment property. If this value is set, the background image will not move even if the rest of the document scrolls.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property example
</title>
<style>
#example {
background-image: url("cat.png");
font-size: 35px;
border: 4px solid black;
color: orange;
background-position: center;
background-color: orange;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1> background-attachment: fixed;example</h1>
<p> Important information that will make you smile. </p>
<div id="example">
<p>
Hello, people of the world. I present to you a revolution. We are Hub to Learn, and we are devoted to your knowledge. Technology is fast changing the world, and we love helping you become a part of that change. So, we stack up knowledge for you in order for you to change the world. Get it?
</p>
</div>
</body>
</html>
Third Example – Using Local Value
In this example, we are using the local value of the background attachment property. Here, a background image will scroll with the content of the element as it scrolls.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property example
</title>
<style>
#example {
background-image: url("cat.png");
font-size: 35px;
border: 4px solid black;
color: black;
background-position: center;
background-color: orange;
background-repeat: no-repeat;
background-attachment: local;
}
</style>
</head>
<body>
<h1> background-attachment: local;example</h1>
<p> Important information that will make you smile. </p>
<div id="example">
<p>
Hello, people of the world. I present to you a revolution. We are Hub to Learn, and we are devoted to your knowledge. Technology is fast changing the world, and we love helping you become a part of that change. So, we stack up knowledge for you in order for you to change the world. Get it?
</p>
</div>
</body>
</html>
Following the pattern of the previous example, let's see how each element uses more than one background image.
Example – Using Multiple Images with Background Attachment
We are applying the background attachment property to two background images in this case. There is a fixed attachment for the first image and a scrolling attachment for the second image. You might want to check out HTML Images instead
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property example
</title>
<style>
#example {
background-image: url("flowers.png"), url("Rose.jpg");
height: 500px;
border: 4px solid black;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed, scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;example</h1>
<p> Important information that makes you smile awaits below. </p>
<div id="example">
<p>
Hello, people of the world. I present to you a revolution. We are Hub to Learn, and we are devoted to your knowledge. Technology is fast changing the world, and we love helping you become a part of that change. So, we stack up knowledge for you in order for you to change the world. Get it?
</p>
</div>
</body>
</html>
