css властивість background-attachment
CSS властивість 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
При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом