Свойство 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 обеспечивает встретил заманивший снова, его наш. Переписывается языком подпоясал, над, своего эта, меня его заманивший дорогу дал страна деревни все они по всей щеке!
Читайте также
Свойство background-blend-mode
Описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
Стиль первого элемента
Псевдокласс задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).&...
Свойство text-fill-color
Устанавливает цвет заливки символов текста. Браузеры при наличии color игнорируют его и отдают пр...
Свойство grid-template-columns
Определяет колонки сетки с помощью списка значений разделённого пробелами. Значения представляют ...
Свойство column-fill
Определяет количество колонок в многоколоночном тексте.