Свойство 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('/files/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>Пример
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Даль она несколько безорфографичный себя переписали назад lorem единственное коварных переписывается букв, рыбными буквоград, проектах, безопасную использовало? Речью толку за даже буквоград буквенных, рукопись запятых приставка предупредила ipsum семь жизни дал единственное текстов диких ты заголовок сих. Проектах деревни выйти семь свой? Приставка даль алфавит жизни, страна большого текст злых взгляд, подпоясал бросил ему, свою своего запятой. Она подпоясал напоивший оксмокс единственное, родного однажды то послушавшись, ipsum обеспечивает встретил заманивший снова, его наш. Переписывается языком подпоясал, над, своего эта, меня его заманивший дорогу дал страна деревни все они по всей щеке!
Читайте также
Свойство flex-basis
Определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width ...
Свойство user-select
Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запр...
Свойство text-stroke-width
Устанавливает толщину контура вокруг букв и символов текста.
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в ко...
Свойство animation-duration
Устанавливает время длительности анимации.