Как закрепить фон при прокрутке страниц?

2013-09-24

При построении сайтов используют разное поведение фона веб-страниц: иногда он прокручивается вместе с содержимым сайта, а иногда закреплен на одном месте. Чтобы сделать фоновое изображение веб-страницы неподвижным, следует использовать средства языка описания стилей CSS (Cascading Style Sheets – «каскадные таблицы стилей»).

Характер поведения фона при прокрутке веб-страницы задает свойство  background-attachment . Приятно знать, что это свойство поддерживается всеми браузерами, поскольку оно присутствует во всех версиях языка CSS, начиная с первой.

Background-attachment может принимать следующие значения.

Scroll – фоновое изображение будет прокручиваться вместе с содержимым веб-страницы, это значение установлено по умолчанию.

Значение fixed сообщает браузеру, что фон страницы независим от остальных ее элементов и должен всегда оставаться неподвижным.

При использовании третьего значения – inherit, фоновое изображение будет вести себя также, как и родительский элемент.

Соответственно, для достижения нашей цели – фиксации фона страницы при прокрутке – следует присвоить элементу страницы, содержащему фоновое изображение, значение  background-attachment: fixed;  Обычно это body. В результате в файле стилей style.css свойства элемента body должны выглядеть примерно так:

или так:

Либо необходимо вставить в заголовок описания html-кода страницы весь блок описания стилей. Между тегами  <HEAD> и </HEAD>  помещаем:

Готово! Фоновое изображение остается неподвижным при прокрутке содержимого веб-страницы.

Метки: ,

Статья пригодилась? Буду признательна, если поделитесь в соцсетях:

Комментарии


Комментариев пока нет, будьте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">