Як закріпити фон

Як закріпити фон

У веб-будівництві застосовують різні моделі поведінки фону при прокручуванні сторінок. Деякі з них можна реалізувати засобами тільки мови HTML, для інших його можливостей недостатньо. Щоб зробити фонове зображення веб-сторінки нерухомим слід використовувати засоби мови опису стилів CSS (Cascading Style Sheets — «каскадні таблиці стилів»).

Інструкція

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

    <style type=»text/css»>



    </ Style>

    Між цими двома тегами будуть поміщені описи стилю. У них треба вказати до якого саме елементу сторінки будуть ставитися інструкції. Фон відноситься до тіла сторінки (BODY):

    BODY {}

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

    background-image: url (img / fon.gif);

    background-attachment: fixed;

    У першому рядку властивість background-image вказує, що в якості фонового зображення треба використовувати файл fon.gif з папки img. У другому рядку міститься установка не прокручувати фон разом із вмістом сторінки. Синтаксис мови CSS дозволяє замінити два рядки на одну:

    background: url (fon.gif) fixed;
  3. Запишіть весь блок опису стилів в зборі:

    <style type=»text/css»>

     BODY {background: url (img / fon.gif) fixed;}

    </ Style>

    Вставити його слід в заголовну частину HTML-коду сторінки, тобто між тегами <HEAD> і </ HEAD>. Не забудьте замінити адресу та ім’я фонової картинки img / fon.gif.