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

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

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

Інструкція

1. Скористайтеся властивістю background-attachment у CSS, щоб вказати, чи має бути фон сторінки фіксованим або рухливим. Всього ця властивість може мати три значення - якщо ви не вказуєте ніякого з них, то за замовчуванням вважається, що 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 >, хоча це і не обов 'язкова умова.