Свойство 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>Читайте также
Свойство outline-color
Указывает цвет внешней границы элемента.
В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не...
Свойство color-scheme
Позволяет элементу указать, в каких цветовых схемах он может удобно отображаться.
Обычный выбор цветовых схем операционной системы: «светлый» и...
Свойство text-decoration
Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисля...
Свойство flex-wrap
Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.
Если перенос строк допускается, то свойство также п...