CSS background-attachment property controls whether the background image scrolls or
remains fixed with the page's content. For example,
body {
background-image: url("coder-illustration.png");
background-attachment: fixed;
}
Browser Output
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
The background is fixed while scrolling.
Here, background-attachment keeps the background image fixed while scrolling the rest of the content in body.
CSS background-attachment Syntax
The syntax for the background-attachment property is,
background-attachment: scroll | fixed | local | initial | inherit;
Here,
scroll: allows the background image to scroll with the page (default value)fixed: stops the background image from scrolling with the pagelocal: allows the background image to scroll with the element's contentinitial: sets the property value to defaultinherit: inherits the property value from its parent element
Example 1: Background-Attachment with Scroll
Let's see an example of scroll value with the background-attachment property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-attachment</title>
</head>
<body>
<h1>Using background-attachment: scroll</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-image: url('https://www.programiz.com/blog/content/images/2021/09/C---Illustration-1.jpg');
background-attachment: scroll;
background-repeat: no-repeat;
}
Browser Output
In the above example, the background image scrolls along with the rest of the content in the body
element.
Example 2: Background-Attachment With Fixed
Let's see an example fixed value with the background-attachment property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-attachment</title>
</head>
<body>
<h1>Using background-attachment: fixed</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-image: url('https://www.programiz.com/blog/content/images/2021/09/C---Illustration-1.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
Browser Output
Using background-attachment: fixed
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
In the above example, the background image remains fixed. It does not scroll with the rest of the content of the
body element.