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

Неугомонное руководство ставит нам новую задачу.

На страничке необходимо разместить контактный телефон для клиентов, партнеров и просто любопытствующих → → →

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

Обратим внимание на следующий важный момент. Сейчас мы с вами изучаем специфкацию CSS 2.1, а согласно данной спецификации на одном блочном элементе может быть не более одного фонового изображения (это ограничение снято в спецификации CSS 3, но в настоящий момент еще не все браузеры в полной мере ее поддерживают, поэтому мы в основном, за исключением последних уроков, не будем выходить за пределы спецификации 2.1).

Неплохо было бы разместить графический файл с нашими контактами в виде фона, но все наши блочные элементы уже перегружены своими фоновыми изображения. А добавлять второй фоновый рисунок мы не будем с целью не выходить за рамки спецификации 2.1.

Решим эту проблему простым, хотя и не слишком элегантым способом.

Обернем все нашу конструкцию еще одним дивом и назавем его, например:
div id="wrapper_css_024"...

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

Получаем такой результат: Мы специально увеличили высоту центрального блока, чтобы спровоцировать появление полос прокрутки.

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

Достигнуть эффекта жесткого закрепления фона на одном месте можно с помощью свойства background-attachment, если присвоить ему значение fixed, т.е. вот так:
background-attachment:fixed;

Рассмотрим возможности свойства background-attachment более подробно:

Закрепление фонового изображения с помощью свойства background-attachment

Значение свойства	Пояснение
scroll	Фон двигается вместе с элементом, к которому относится. Это значение по умолчанию.
fixed	Фон жестко фиксируется.
local	Фон двигается вместе с контентом элемента.

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.

css_025_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_025_001.zip ← скачайте пример, чтобы установить на свой сайт...