Свойство 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>Читайте также
Свойство column-rule-style
Определяет стиль линий между колонок в многоколоночном тексте....
Свойство filter
Применяет художественные эффекты к элементам. Обычно используется для изображений....
Свойство writing-mode
Устанавливает направление текста на странице — по горизонтали или вертикали....
Свойство border-width
Устанавливает толщину границы элемента....