CSS background-attachment
The background-attachment property sets whether the background image scrolls with the page or stays fixed in place.
Fixed background
The background image is fixed, so it does not move when you scroll the page.
Prompt
An HTML page with a fixed background image that does not scroll with the page.
In an internal
<style> block, set the body background-image to url("img_tree.png"), with background-repeat no-repeat, background-position right top, and background-attachment fixed. Add a heading and enough paragraphs to make the page scroll, so the fixed background stays in place.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background image is fixed. Scroll down the page and the image stays in place.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
</body>
</html>
Scrolling background
The background image scrolls together with the rest of the page.
Prompt
An HTML page with a background image that scrolls with the page.
In an internal
<style> block, set the body background-image to url("img_tree.png"), with background-repeat no-repeat, background-position right top, and background-attachment scroll. Add a heading and enough paragraphs to make the page scroll, so the background moves with the content.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background image scrolls with the page. Scroll down and the image moves with the content.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
</body>
</html>
The CSS Background Attachment Property
The property covered on this page is background-attachment, which sets whether a background image is fixed or scrolls with the rest of the page.