CSS background-attachment
Свойство background-attachment задаёт, прокручивается ли фоновое изображение вместе со страницей или остаётся фиксированным.
Фиксированный фон
Фоновое изображение зафиксировано, поэтому оно не двигается при прокрутке страницы.
Prompt
HTML-страница с фиксированным фоновым изображением, которое не прокручивается вместе со страницей.
Во внутреннем блоке
<style> задайте body background-image равным url("img_tree.png"), с background-repeat no-repeat, background-position right top и background-attachment fixed. Добавьте заголовок и достаточно абзацев, чтобы страница прокручивалась, тем самым показывая, что фиксированный фон остаётся на месте.
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>
Прокручиваемый фон
Фоновое изображение прокручивается вместе с остальной частью страницы.
Prompt
HTML-страница с фоновым изображением, которое прокручивается вместе со страницей.
Во внутреннем блоке
<style> задайте body background-image равным url("img_tree.png"), с background-repeat no-repeat, background-position right top и background-attachment scroll. Добавьте заголовок и достаточно абзацев, чтобы страница прокручивалась, тем самым показывая, что фон движется вместе с содержимым.
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>
Свойство CSS Background Attachment
Свойство, рассматриваемое на этой странице, — background-attachment, которое задаёт, зафиксировано фоновое изображение или прокручивается вместе с остальной частью страницы.