Як закріпити тло

Як закріпити тло

У веб-будівництві застосовують різні моделі поведінки фону при прокрутці сторінок. Деякі з них можна реалізувати засобами тільки мови 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; B першого рядка властивість 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.