Перейти к содержанию

background-attachment

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.

Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Демо

Фон

Синтаксис

1
2
3
4
5
6
7
8
9
/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

Значения

fixed

Делает фоновое изображение элемента неподвижным.

scroll

Позволяет перемещаться фону вместе с содержимым.

local

Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.

Значение по-умолчанию:

1
background-attachment: scroll;

Применяется ко всем элементам

Спецификации

Поддержка браузерами

Can I Use background-attachment? Data on support for the background-attachment feature across the major browsers from caniuse.com.

Описание и примеры

Пример 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>background-attachment</title>
        <style>
            body {
                background-image: url('/example/image/help.png');
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
        <div style="height:2000px">Пример текста</div>
    </body>
</html>

Пример 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>background-attachment</title>
        <style>
            body {
                background-image: url('/example/image/pattern-left.png'),
                    url('/example/image/pattern-right.png');
                background-repeat: repeat-y, repeat-y;
                background-position: left, right;
                background-attachment: fixed, fixed;
            }
        </style>
    </head>
    <body>
        <div style="height:2000px"></div>
    </body>
</html>

Комментарии