У веб-будівництві застосовують різні моделі поведінки фону при прокручуванні сторінок. Деякі з них можна реалізувати засобами тільки мови HTML, для інших його можливостей недостатньо. Щоб зробити фонове зображення веб-сторінки нерухомим слід використовувати засоби мови опису стилів CSS (Cascading Style Sheets — «каскадні таблиці стилів»).
Інструкція
- Використовуйте властивість background-attachment щоб задати характер поведінки фону при прокручуванні сторінки. Це властивість присутня у всіх версіях мови CSS, починаючи з першої, і такий спосіб фіксації підтримується всіма браузерами на відміну від інших варіантів. Для background-attachment передбачені лише три значення scroll, fixed і inherit. Значення scroll використовується за умовчанням і означає, що фонове зображення буде «прикріплено» до вмісту і при прокручуванні вмісту буде прокручуватися разом з ним. Значення fixed вказує браузеру, що фонове зображення повинно бути незалежно від вмісту і при прокручуванні залишатися нерухомим. А значення inherit означає, що фон цього елемента повинен вести себе так само, як і фон батьківського елемента. Вам потрібно використовувати властивість background-attachment із значенням fixed.
- Складіть код з відповідними 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;
- Запишіть весь блок опису стилів в зборі:
<style type=»text/css»>
BODY {background: url (img / fon.gif) fixed;}
</ Style>
Вставити його слід в заголовну частину HTML-коду сторінки, тобто між тегами <HEAD> і </ HEAD>. Не забудьте замінити адресу та ім’я фонової картинки img / fon.gif.