Як зробити нерухомий фон

Як зробити нерухомий фон

Фон веб-сторінки може бути прив’язаний до її вмісту або вести себе незалежно від нього. У першому випадку при прокрутці вмісту у вікні браузера фонове зображення теж буде прокручуватися, а в другому воно може залишатися нерухомим. Для реалізації фіксованого заднього плану сторінки слід використовувати мову опису стилів CSS — тільки він може гарантувати однакову поведінку фону в різних типах браузерів.

Інструкція

  1. Скористайтеся наявними в CSS властивістю background-attachment, щоб вказати чи повинен бути фон сторінки фіксованим або рухомим. Всього це властивість може мати три значення — якщо ви не вказуєте ніякого з них, то за замовчуванням вважається, що background-attachment має значення scroll. При такому значенні фонове зображення прокручується разом з контентом сторінки. Значення inherit копіює поведінку фону батьківського елементу, а значення fixed робить фонову картинку незалежною від вмісту — воно залишатися нерухомим при прокручуванні сторінки. Його вам і слід використовувати.
  2. Підготуйте CSS-інстукціямі для використання в сторінках, фон яких потрібно зафіксувати. Якщо ви не будете розміщувати CSS-код у зовнішній файл опису стилів, то ці інструкції треба розмістити між відкриває і закриває тегами style:

    <style type=»text/css»>

     / / Тут будуть описи стилів

    </ Style>

    Опис поведінки фону сторінки потрібно прив’язати до елемента BODY — в термінології мови CSS він буде називатися «селектором» і записуватися буде так:

    BODY {

     / / Тут будуть описи тіла сторінки

    }

    Властивості, що стосуються цієї селектору треба розмістити всередині фігурних дужок, розділяючи їх крапкою з комою:

    BODY {

     background-attachment: fixed;

     background-image: url (images / BG.gif);

    }

    Перший рядок фіксує фонове зображення, а друга вказує адресу файлу, який містить фонову картинку, щодо адреси сторінки. Ці два рядки можна записати і в одній складній CSS-інструкції таким чином:

    background: url (images / BG.gif) fixed;
  3. Вставте весь код для фіксації фону в текст сторінки. У закінченому вигляді він може виглядати, наприклад, так:

    <style type=»text/css»>

     BODY {background: url (images / BG.gif) fixed;}

    </ Style>

    Зрозуміло, вам треба замінити адреса розміщення і назва файлу фонової картинки. Код краще помістити перед тегом </ HEAD>, хоча це і не обов’язкова умова.