Краткий ответ: background-attachment: fixed
Подробнее:
Свойство background-attachment в CSS указывает, как перемещать фон относительно области просмотра.
Существует три значения: прокрутка, фиксированная и локальная. Лучший способ объяснить это с помощью демонстрации (попробуйте прокрутить отдельные фоны):
@import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
overflow-y: scroll;
}
.scroll {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
}
.local {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: local;
}
.expand {
height: 400px;
width: 100%;
}
.extra-space {
margin-bottom: 50px;
}
<h2><code>scroll (default)</code></h2>
<div class="scroll"><div class="expand"></div></div>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<h2><code>local</code></h2>
<div class="local"><div class="expand"></div></div>
<br class="extra-space">
Говоря о фоновом прикреплении, нужно подумать о двух разных видах: основной вид (окно браузера) и локальный вид (это можно увидеть в демонстрационном примере выше).
scroll является значением по умолчанию. Он прокручивается с основным видом, но остается фиксированным внутри локального вида.
fixed остается фиксированным, несмотря ни на что. Это похоже на физическое окно: перемещение вокруг окна меняет вашу перспективу, но не меняет то, где что-то находится за пределами окна.
local был изобретен, потому что значение прокрутки по умолчанию действует как фиксированный фон. Он прокручивается как с основного, так и с локального вида. Есть несколько классных вещей, которые вы можете сделать с ним.
ИСТОЧНИК