Приднестровская поддержка XOOPS
Вам наверняка встречались сайты, на которых фоновое изображение не меняет своего положения, в то время как контент прокручивается над ним.
Такого эффекта можно добиться с помощью свойства 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, увидят прокрутку фонового изображения, что обычно можно считать вполне приемлемым компромиссом (это даже может подвигнуть пользователей на обновление своих браузеров).
Отправитель | Нити |
---|
2 пользователь(ей) активно (1 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 2 далее... |