Як зафіксувати тло

Як зафіксувати тло

Іноді задум дизайнера вимагає, щоб фонове зображення залишалося нерухомим при прокрутці відвідувачем вмісту сторінки. Це можна зробити, змінивши за допомогою інструкцій мови CSS (Cascading Style Sheets - "каскадні таблиці стилів") використовувану за замовчуванням установку поведінки фону.

Інструкція

1. Додайте до веб-документа опис стилів для блоку body, що містить властивість background-attachment зі значенням fixed, і фон сторінки залишатиметься нерухомим під час прокручування документа. Цей спосіб фіксації фону буде працювати у всіх браузерах, що підтримують будь-який з нині діючих CSS-стандартів, починаючи з версії 1.0. Крім значення fixed, для цієї властивості стандартами передбачено ще два варіанти - scroll і inherit. Якщо в описах стилів документа не вказано ніякого значення для background-attachment, то за замовчуванням вважається, що воно встановлено в scroll. У цьому випадку тло буде пересуватися разом з прокруткою вмісту сторінки. Значення inherit вказує, що для властивості background-attachment цього елемента має бути використано те ж саме значення, що і для його батьківського елемента.

2. Доповніть тег < body > потрібної сторінки атрибутом style і помістіть в нього опис стилів, що фіксує тло. Наприклад, це може виглядати так:<body style=""background-attachment: fixed "" > .Можно тут же вказати і адресу фонового зображення:<body style=""background-attachment: fixed; background-image: url(/img/pic.gif); "" > .Адрес і назва картинки (img/pic.gif) замініть вашими власними значеннями. Такий спосіб зручний тим, що потребує найменших змін у коді сторінки, але частіше опис стилів виносять в окремий блок у заголовковій частині документа або навіть в окремий файл.

3. Якщо ви бажаєте використовувати окремий CSS-блок з інструкціями для фіксації тла сторінки, помістіть перед тегом </head > вихідного коду, наприклад, такі рядки:<style type=""text/css"">BODY {background: url (img/pic.gif) fixed;} </style > .Не забудьте вказати правильне ім 'я та адресу фонового зображення замість img/pic.gif.