css властивість background-attachment


CSS властивість background-attachment визначає, чи буде фонове зображення прокручуватися разом зі вмістом елемента.

Властивість `background-attachment`

Мабуть кожен бачив “супер крутий” сайт де тло при прокручуванні залишається на місці і не рухається разом з вмістом, саме таку поведінку дозволяє задати ця властивість, дивись 3-й приклад. Якщо коротко, то background-attachment може зафіксувати тло, щоб воно залишатися нерухомим, або зробити так, щоб тло рухалося разом з документом.

Існує різниця між головним вікном браузера та локальним вікном (ви можете побачити це в демо нижче).

scroll є значенням без задання. Тло у цьому випадку прокручується разом з головним вікном браузера, але залишається фіксованим всередині локлаьного перегляду

local робить так, щоб тло прокручувалося тільки всередині свого локального вікна, він фіксується відносно вмісту елементу, й при прокручуванні цілої сторінки не буде рухатися.

fixed же фіксує тло, незалежно від типу вікна в якому він розташований.

Дозволяється вказувати декілька значень для ряду фонових зображень, перераховуючи їх через кому. Кожне нове значення застосовується до для кожного з множинних фонових малюнків в тому порядку, який визначений у властивості background-image. Наочно можеш подивитися в другому прикладі

Синтаксис

background-attachment: scroll|fixed|local|initial|inherit|unset;

Властивість background-attachment може отримувати 6 значень:

scroll

Фонове зображення фіксується по відношенню до самого елементу і не прокручується разом з його вмістом, тобто якщо елемент має прокрутку, то зображення залишається на місці. Якщо сторінка має прокрутку, то фонове зображення прокручується разом з елементом. Без задання.

fixed

Зображення фіксується по відношенню до вікна браузера, тому тло залишається не рухомим при прокручуванні вмісту сторінки і / або вмісту елемента.

local

Фонове зображення фіксується по відношенню до вмісту елементу, тобто якщо елемент має прокрутку, фонове зображення прокручується разом з вмістом елементу.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

unset

Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

Значення без задання: scroll
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.backgroundAttachment="fixed"

Переглядачі

Переглядач
одне тло

1.0

4.0

1.0

1.0

3.5

декілька фонів

1.0

9.0

3.6

1.3

10.5

local

1.0

9.0

25

5.0

10.5

Переглядач
одне тло

2.1

1.0

3.2

декілька фонів

2.1

1.0

3.2

local

2.1

25

3.2


Мобільних переглядачів ще не додано.

Приклади


Демонстрація роботи властивості

Тут наочно показано як працює кожне значення властивості background-attachment

При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом

Додаткові посилання