Оглавление

Как сделать фоновое изображение неподвижным при прокрутке контента

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

Такого эффекта можно добиться с помощью свойства background-attachment.


Решение
Путем присвоения значения fixed свойству background-attachment можно зафиксировать положение фонового изображения, и оно будет оставаться на месте при прокрутке контента.


body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #D2D7E4;
color: #000000;
background-image: url(background-repeatx.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}

Результат показан на рис. 3.8.

 

Зафиксированное фоновое изображение

Рис. 3.8. Зафиксированное фоновое изображение остается неподвижным при прокрутке контента (demo)

 

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

 

В качестве варианта можно было бы воспользоваться сокращенным методом записи той же самой информации с помощью свойства background. Оно позволяет одновременно указать значения свойств background-color, background-image, background-repeat, background-attachment и background-position в одном описании. Для примера рассмотрим следующее правило CSS:


body {
background-color: #D2D7E4;
background-image: url(background-repeatx.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 0 0;
}


Эти описания можно представить в более сжатой форме следующим образом:

body {
background: #D2D7E4 url(background-repeatx.jpg) repeat-x fixed 0 0;
}

 

В заключение более подробно остановимся на описании background-attachment: fixed. Поддержка данного свойства, как и многих других CSS-свойств, у семейства браузеров Internet Explorer ограничена. Ранние версии IE обрабатывают данное свойство некорректно, что было исправлено только в IE7. Существуют обходные пути с использованием JavaScript, но, как правило, в этом случае игра едва ли стоит свеч.  По умолчанию пользователи ранних версий Internet Explorer, не поддерживающих декларацию background-attachment: fixed, увидят прокрутку фонового изображения, что обычно можно считать вполне приемлемым компромиссом (это даже может подвигнуть пользователей на обновление своих браузеров).

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити