Стили фона

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

Таблица 5.3. Свойства стиля фона

СвойствоЗначение

background-attachment	Задает соединение фонового изображения с документом, будет ли изображение прокручиваться вместе с текстом или нет. fixed scroll
background-image	Задает фоновое изображение элемента страницы, определяемое как url(url) none
background-position	Задает положение верхнего левого угла фонового изображения относительно верхнего левого угла контейнерного элемента, используя физический размер, процент, ключевое слово или пару ключевых слов. left top left% top% top\|right\|bottom\|left\|center top left\|top center\|top right center left\|center center\|center right bottom left\|bottom center\|bottom right
background-repeat	Задает повторение фонового изображения по горизонтали, по вертикали, в обоих направлениях или вывод без повторения. repeat-x repeat-y repeat no-repeat

Фоновое изображение определяется с помощью свойства background-image:url(url), где расположение файла изображения задается его адресом url. Если файл изображения хранится в том же месте, что и страница, то необходимо ввести только имя файла. Если никакие другие настройки стиля в отношении фонового изображения не задаются, то оно повторяется горизонтально и вертикально, вдоль и поперек контейнера, чтобы заполнить фон изображением.

Страница, показанная на рисунке 5.18, использует свойство background-image для заполнения страницы горизонтально и вертикально с помощью текстуры. Никакие другие свойства стиля не требуются.

Рис. 5.18. Страница с изображением текстуры, используемым в качестве фона

Изображение Background.jpg имеет реальный размер 144 х 144 пикселя. Если дополнительных свойств стиля не задано, изображение автоматически повторяется поперек и вниз по странице, чтобы заполнить все доступное пространство.

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

Рис. 5.19. Страница с повторяющимся фоновым изображением с уменьшенной плотностью

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

Рис. 5.19. Страница с повторяющимся фоновым изображением с уменьшенной плотностью

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

Можно сделать так, что будет выводиться одно или несколько фоновых изображений, задавая соответствующим образом свойство background-repeat. Значение repeat-x повторяет изображение по горизонтали столько раз, сколько необходимо, чтобы заполнить контейнер слева направо, создавая ряд изображений; repeat-y повторяет изображение по вертикали столько раз, сколько необходимо для заполнения контейнера сверху вниз, создавая столбец изображений; значение repeat повторяет изображение по обоим направлениям, чтобы полностью заполнить контейнер (значение по умолчанию); а no-repeat создает одно изображение в верхнем левом углу контейнера.

Если изображение не повторяется, можно указать положение единственного изображения в контейнере, используя свойство background-position. Следующий код размещает изображение в центре страницы с помощью background-position:320px 150px. Вывод в браузер показан на рисунке 5.20.

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

Рис. 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>

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

Предыдущие примеры показывают фоновые изображения для всей страницы Web. Однако любой контейнерный тег может иметь фоновое изображение. Рисунок 5.22 показывает параграф с фоновой текстурой.

<style type="text/css"> p#BKGND {background-image:url(Background.jpg); margin:20px; font-family: verdana; font-size:12pt; font-weight:bold; text-align:justify} </style>

<h1>Фоновая текстура параграфа</h1>

<p id="BKGND">Это параграф с фоновой текстурой. Используемое по умолчанию свойство background-image повторяет фоновый шаблон по горизонтали и вертикали, чтобы заполнить область параграфа.</p>

Рис. 5.22. Параграф с фоновой текстурой

Содержание раздела