Как сделать неподвижный фон?

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

Инструкция

Воспользуйтесь имеющимся в CSS свойством background-attachment, чтобы указать должен ли быть фон страницы фиксированным или подвижным. Всего это свойство может иметь три значения - если вы не указываете никакого из них, то по умолчанию считается, что background-attachment имеет значение scroll. При таком значении фоновое изображение прокручивается вместе с контентом страницы. Значение inherit копирует поведение фона родительского элемента, а значение fixed делает фоновую картинку независимой от содержимого - оно оставаться неподвижным при прокрутке страницы. Его вам и следует использовать.

Подготовьте CSS-инстукции для использования в страницах, фон которых нужно зафиксировать. Если вы не будете помещать CSS-код во внешний файл описания стилей, то эти инструкции надо разместить между открывающим и закрывающим тегами style:

// здесь будут описания стилей

Описание поведения фона страницы надо привязать к элементу BODY - в терминологии языка CSS он будет называться «селектором» и записываться будет так:BODY {

// здесь будут описания тела страницы

}Свойства, относящиеся к этому селектору надо разместить внутри фигурных скобок, разделяя их точкой с запятой:BODY {

background-attachment: fixed;

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

}Первая строка фиксирует фоновое изображение, а вторая указывает адрес файла, содержащего фоновую картинку, относительно адреса страницы. Эти две строки можно записать и в одной сложной CSS-инструкции таким образом:background: url(images/BG.gif) fixed;

Вставьте весь код для фиксации фона в текст страницы. В законченном виде он может выглядеть, например, так:

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

Разумеется, вам надо заменить адрес размещения и название файла фоновой картинки. Код лучше поместить перед тегом , хотя это и не обязательное условие.

Оцените статью!