Фоновое изображение

За отображение фонового рисунка отвечают четыре свойства:

· background-image – определяет графическое изображение, которое будет использоваться в качестве фона. В качестве значения этого свойства задается URL файла с фоновым изображением в следующем формате:

body {background-image: url(URL-файла)};

· background-repeat – задает алгоритм повторения фонового изображения. Возможны следующие значения:

o repeat – изображение повторяется и по вертикали, и по горизонтали, заполняя всю площадь элемента. Используется по умолчанию;

o repeat-x – изображение повторяется только по горизонтали;

o repeat-y – изображение повторяется только по вертикали;

o no-repeat – изображение не повторяется, а размещается в единственном экземпляре;

· background-attachment – определяет возможность прокрутки изображения вместе с контентом – при значении scroll, или же оно должно быть зафиксировано относительно окна браузера – значение fixed;

· background-position – определяет расположение первого экземпляра фонового изображения на странице. Различают три способа задания координат:

1) задание их в процентах от линейных размеров элемента, которому назначается фоновое изображение. Первая цифра означает смещение по горизонтали, вторая – по вертикали. Если задано только одно число, предполагается, что речь идет о горизонтальном смещении, вертикальное смещение при этом предполагается равным 50%;

2) задание координат с помощью ключевых слов:

o left – левая граница;

o right – правая граница;

o top – верхняя граница;

o bottom – нижняя граница;

o center – по центру.

Без примеров применения здесь, пожалуй, не обойтись:

o top left или left top – то же, что 0% 0%;

o top, top center или center top – то же, что 50% 0%;

o left, left center или center left – то же, что 0% 50%;

o right top или top right – то же, что 100% 0%;

o center или center center – то же, что 50% 50%;

o right, right center или center right – то же, что 100% 50%;

o bottom left или left bottom – то же, что 0% 100%;

o bottom, bottom center или center bottom – то же, что 50% 100%;

o bottom right или right bottom – то же, что 100% 100%;

3) применение линейных единиц измерения:

§ относительные:

o em – кегельная, определяемая высотой строки;

o ex – мера, определяемая высотой буквы х данного шрифта;

o px – в пикселях;

§ абсолютные:

o cm – сантиметр;

o mm – миллиметр;

o in – в дюймах (2,54 см);

o pt – в пунктах (1/72 дюйма);

o pc – пика (12 пунктов).

Пример 2.2. Использование CSS свойств, управляющих фоновым изображением.

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Вставка фонового изображения</title>

<!--

body {

color: #000;

background-color: #fff;

background-image: url(fortress.jpg);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: 50px 150px;

}

-->

</style>

</head>

<body>

<h1>Вставка фонового изображения</h1>

<p>В эпоху, когда каскадные листы стилей были еще в диковинку, существовал лишь один алгоритм рендеринга фона — размножение фонового изображения от верхнего левого угла того или иного элемента страницы по всей площади последнего.</p>

<p>Благодаря CSS арсенал средств по управлению фоновыми изображениями существенно расширился.</p>

<p>За отображение фонового рисунка отвечают четыре свойства: background-image, background-repeat, background-attachment и background-position.</p>

</body>

</html>