## CSS Background-attachment Property

The background-attachment property is used to sets whether a background image scrolls with the page, fixed and local.

CSS Syntax→ background-attachment: scroll|fixed|local;

#### Scroll

• The background image will scroll with the page. It is default.
Example
``````<!DOCTYPE html>
<html>
<style>
body {
background-image: url("https://nielitbhu.com/image.jpg");
background-repeat: no-repeat;
background-attachment: scroll;

}
</style>
<body>
<h1>Example of background-attachment scroll Property;</h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>``````

#### fixed

• The background image will not scroll with the page.
Example
``````<!DOCTYPE html>
<html>
<style>
body {
background-image: url("https://nielitbhu.com/image.jpg");
background-repeat: no-repeat;
background-attachment: local;

}
</style>
<body>
<h1>Example of background-attachment local Property;</h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>``````

#### local

• The background image will scroll with the element’s contents .
Example
``````<!DOCTYPE html>
<html>
<style>
body {
background-repeat: no-repeat;
background-attachment: local;

}
</style>
<body>
<h1> background-attachment: local;</h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>``````
English Hindi