Как закрепить фон при прокрутке страниц?
2013-09-24При построении сайтов используют разное поведение фона веб-страниц: иногда он прокручивается вместе с содержимым сайта, а иногда закреплен на одном месте. Чтобы сделать фоновое изображение веб-страницы неподвижным, следует использовать средства языка описания стилей CSS (Cascading Style Sheets – «каскадные таблицы стилей»).
Характер поведения фона при прокрутке веб-страницы задает свойство background-attachment . Приятно знать, что это свойство поддерживается всеми браузерами, поскольку оно присутствует во всех версиях языка CSS, начиная с первой.
Background-attachment может принимать следующие значения.
Scroll – фоновое изображение будет прокручиваться вместе с содержимым веб-страницы, это значение установлено по умолчанию.
Значение fixed сообщает браузеру, что фон страницы независим от остальных ее элементов и должен всегда оставаться неподвижным.
При использовании третьего значения – inherit, фоновое изображение будет вести себя также, как и родительский элемент.
Соответственно, для достижения нашей цели – фиксации фона страницы при прокрутке – следует присвоить элементу страницы, содержащему фоновое изображение, значение background-attachment: fixed; Обычно это body. В результате в файле стилей style.css свойства элемента body должны выглядеть примерно так:
|
1 2 |
BODY {background-image: url(img/fon.gif); background-attachment: fixed;} |
или так:
|
1 |
BODY {background: url(img/fon.gif) fixed;} |
Либо необходимо вставить в заголовок описания html-кода страницы весь блок описания стилей. Между тегами <HEAD> и </HEAD> помещаем:
|
1 2 3 |
<style type="text/css"> BODY {background: url(img/fon.gif) fixed;} </style> |
Готово! Фоновое изображение остается неподвижным при прокрутке содержимого веб-страницы.
