Как сделать фоновое изображение неподвижным при прокрутке контента
Вам наверняка встречались сайты, на которых фоновое изображение не меняет своего положения, в то время как контент прокручивается над ним. Такого эффекта можно добиться с помощью свойства background- attachment.
Решение
Путем присвоения значения fixed свойству background-attachment мож- но зафиксировать положение фонового изображения, и оно будет оста- ваться на месте при прокрутке контента.
chapter03/backgroundfixed.html (фрагмент)
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.
Обсуждение
В данном случае для добавления в документ фонового изображения, его позиционирования и описания поведения при прокрутке контента было использовано несколько CSS-свойств.
В качестве варианта можно было бы воспользоваться сокращенным ме- тодом записи той же самой информации с помощью свойства background.
Рис. 3.8. Зафиксированное фоновое изображение остается неподвижным при прокрутке контента
Оно позволяет одновременно указать значения свойств background-color, background-image, background-repeat, background-attachment и background- position в одном описании. Для примера рассмотрим следующее пра- вило CSS:
chapter03/backgroundfixed.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, но, как правило, в этом случае игра едва ли стоит свеч.1 По умолчанию пользователи ранних версий Internet Explorer, не поддер- живающих декларацию background-attachment: fixed, увидят прокрутку фонового изображения, что обычно можно считать вполне приемлемым компромиссом (это даже может подвигнуть пользователей на обновле- ние своих броузеров).
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Добавление тени к блоку (0)
- Создание галереи миниатюр (0)
- Использование изображения вместо маркера списка (0)
- Добавление рамки к изображению (0)
- Удаление средствами CSS синей рамки вокруг изображения, выполняющего функцию ссылки (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Как изменить способ размножения фонового изображения (0)