Основы работы с XHTML и CSS


7 - часть 2


Страница с единственным фоновым изображением, размещенным в точно указанном месте

Рис. 5.20.  Страница с единственным фоновым изображением, размещенным в точно указанном месте

Два значения в пикселях - 320px и 150px - задают расстояние от левого края и верха страницы до левого края и верха изображения. То есть, левый край изображения находится на расстоянии 320 пикселей от левого края страницы; верхний край изображения находится на расстоянии 150 пикселей от верхнего края страницы. Можно попробовать несколько вариантов размещения, прежде чем найти удовлетворительное решение.

Кроме точного определения в пикселях положения фонового изображения, можно определить для размещения изображения определенный процент от ширины и высоты страницы. Можно также использовать для позиционирования изображения различные ключевые слова или пары ключевых слов.

Ключевое слово top, right, bottom, left, или center помещает изображение, соответственно, вверху в центре, справа в центре, внизу в центре и в центре страницы. Пары ключевых слов top left (вверху слева), top center (вверху в центре), top right (вверху справа), center left (в центре слева), center center (в центре), center right (в центре справа), bottom left (внизу слева), bottom center (внизу в центре) или bottom right (внизу справа) помещают изображение в указанные позиции на странице.

Важно помнить, что эти позиции задаются относительно полного размера страницы Web, а не размера окна браузера. Поэтому изображение, помещенное в центре или внизу страницы, может быть не видимо, пока страница не будет прокручена, так чтобы изображение стало видимо.

В приведенных выше примерах фоновое изображение прокручивается при прокручивании текста на странице. Для некоторых типов фона может понадобиться, чтобы изображение оставалось зафиксированным и текст прокручивался бы поверх фиксированного фона. Этот результат реализуется с помощью свойства background-attachment. Его значением по умолчанию является scroll; если изменить его на fixed, то фоновое изображение будет удерживаться в одной позиции на странице при прокручивании текста поверх него. Результат показан на рисунке 5.21.

<style type="text/css"> body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat; background-position:320px 150px; background-attachment:fixed} </style>




Начало  Назад  Вперед