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

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

Іноді задум дизайнера вимагає, щоб фонове зображення залишалося нерухомим при прокручуванні відвідувачем вмісту сторінки. Це можна зробити, змінивши за допомогою інструкцій мови 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.