Свойство CSS background-attachment
Свойство background-attachment определяет, зафиксировано ли изображение фона или оно будет прокручиваться вместе с остальной частью страницы.
background-attachment поддерживает пять значений: scroll, fixed, local, initial и inherit. При установке scroll изображение фона прокручивается вместе со страницей. Это значение по умолчанию. При применении fixed изображение фона остаётся зафиксированным относительно области просмотра (viewport). Даже если у элемента есть механизм прокрутки, фон не перемещается вместе со страницей. При установке local изображение фона прокручивается вместе с содержимым элемента. initial устанавливает свойству значение по умолчанию, а inherit наследует его от родительского элемента. Примечание: в JavaScript имя свойства DOM имеет camelCase: backgroundAttachment.
| Начальное значение | scroll |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.backgroundAttachment = "scroll"; |
Синтаксис
Синтаксис свойства CSS background-attachment
background-attachment: scroll | fixed | local | initial | inherit;Пример свойства background-attachment со значением "scroll":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 400px 100px;
}
.scroll-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<div class="scroll-container">
<p>The background-image scrolls with the viewport. Try to scroll down.</p>
<p>More content to demonstrate scrolling...</p>
<p>Keep scrolling...</p>
<p>Almost there...</p>
<p>End of content.</p>
</div>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>В следующем примере изображение фона имеет значение "fixed" и не перемещается вместе со страницей.
Пример свойства background-attachment со значением "fixed":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 400px 100px;
}
.scroll-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<div class="scroll-container">
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>More content to demonstrate scrolling...</p>
<p>Keep scrolling...</p>
<p>Almost there...</p>
<p>End of content.</p>
</div>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>Пример свойства background-attachment со значением "local":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.local-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-attachment: local;
background-size: 400px 100px;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<div class="local-container">
<p>The background-image scrolls with the element's contents, not the viewport. Try to scroll down.</p>
<p>More content to demonstrate scrolling...</p>
<p>Keep scrolling...</p>
<p>Almost there...</p>
<p>End of content.</p>
</div>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>Пример свойства background-attachment с фиксированным изображением фона и background-size: cover:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<p>Scroll the page to see the effect.</p>
<div class="example"></div>
<div style="height:800px;background-color:#1c87c9;"></div>
</body>
</html>Практика
Какие из следующих являются допустимыми значениями свойства CSS background-attachment?