Свойство background-attachment
Описание
Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента или нет.
Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Синтаксис
background-attachment: fixed | scroll | local[, fixed | scroll | local]*;Подробности
| Значение | Описание |
| fixed | Делает фоновое изображение элемента фиксированным ( неподвижным ). |
| scroll | Позволяет перемещаться фону вместе с содержимым. |
| local | Фон фиксируется с учётом поведения элемента. Т.е. если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, будет оставаться на месте. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.example-5 {
background: #750000e0;
border-radius: 9px;
padding: 10px;
}
.example-5 p {
padding: 10px;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.542);
}
.example-5 {
height: 250px;
padding: 10px;
overflow: auto;
background-image: url('https://mfs.gki-webik.ru/s?path=/images/regular/body-img.jpg');
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
border: 2px solid black;
color: white;
}
</style>
<div class='example-5'>
<h3>Пример</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Даль она несколько безорфографичный себя переписали назад lorem единственное коварных переписывается букв, рыбными буквоград, проектах, безопасную использовало? Речью толку за даже буквоград буквенных, рукопись запятых приставка предупредила ipsum семь жизни дал единственное текстов диких ты заголовок сих. Проектах деревни выйти семь свой? Приставка даль алфавит жизни, страна большого текст злых взгляд, подпоясал бросил ему, свою своего запятой. Она подпоясал напоивший оксмокс единственное, родного однажды то послушавшись, ipsum обеспечивает встретил заманивший снова, его наш. Переписывается языком подпоясал, над, своего эта, меня его заманивший дорогу дал страна деревни все они по всей щеке!
</p>
</div>
</body>
</html>Читайте также
Свойство transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя ...
Свойство word-wrap
Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область....
Свойство list-style
Универсальное свойство. Одновременно задает стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка....
Свойство column-span
Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колонок или только одну из них. Обычно, его применяют для ...