Определение цвета обоев ('background-color').

Значение: <color> | transparent

По умолчанию: transparent

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Это свойство описывает цвет обоев элемента.

H1 { background-color: #F00 }

Цвет для обоев задается по тем же правилам, что и для цвета переднего плана. Однако существует разница в выполнении данной инструкции различными UA. IE, к примеру, заполнит цветом фона всю область, занимаемую элементом, от поля до поля. NN в тоже время заполнит цветом фона только область под текстом. Эту разницу Вы можете наглядно увидеть, если создадите документ со следующим текстом:

<html>

<head><title>Test of background-color</title></head>

<style><!--

.bg{background-color:red}

--></style>

<body>

<p class=bg>Проверим этот код в IE и в NN, что бы увидеть разницу в обработке.

</body>

</html>

А теперь проверьте этот код в IE и в NN.

Определение рисунка фона ('background-image').

Значение: <url> | none

По умолчанию: нет

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

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

BODY { background-image: url(marble.gif) }

P { background-image: none }

Определение повтора рисунка фона ('background-repeat').

Значение: repeat | repeat-x | repeat-y | no-repeat

По умолчанию: repeat

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли изображение и каким образом.

Значение 'repeat' указывает, что изображение повторяется как в горизонтальном, так и в вертикальном направлении. Значение 'repeat-x' ('repeat-y') устанавливает повтор изображения соответственно только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от одного края до противоположного. При значении 'no-repeat' изображение не повторяется.

BODY {

background: red url(pendant.gif);

background-repeat: repeat-y;

}

В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном направлении.

Определение привязки фона ('background-attachment').

Значение: scroll | fixed

По умолчанию: scroll

Область приложения: все элементы

Наследование: нет

Процентное выражение: неопр.

Если определен рисунок фона, значение свойства "привязка" ('background-attachment') определяет, привязан ли рисунок к холсту или перемещается вместе с содержанием.

Значение ‘fixed’ создает такой эффект, как будто текст перемещается по поверхности рисунка обоев. Однако не стоит увлекаться этим эффектом, так как для этого необходимо значительное количество ресурсов компьютера.

BODY {

background: red url(pendant.gif);

background-repeat: repeat-y;

background-attachment: fixed;

}

Некоторые UA рассматривают 'fixed' как 'scroll'.

Определение положения фона ('background-position')

Значение: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

По умолчанию: 0% 0%

Область применения: блочные и замещаемые элементы

Наследование: нет

Процентное значение: по отношению к стороне самого элемента

Если рисунок фона был определен, значение свойства "положение фона" определяет его начальное расположение.

При парном значении '0% 0%', верхний левый угол изображения устанавливается в верхнем левом углу поля, окружающего содержание элемента (т.е. не того поля, что окружает отступ, рамку или границу). При парном значении '100% 100%', нижний правый угол изображения устанавливается в нижнем правом углу элемента. При парном значении '14% 84%', точка изображения 14% вправо и 84% вниз будет установлена на точке элемента 14% вправо и 84% вниз.

При парном значении '2cm 2cm', верхний левый угол изображения будет установлен на расстоянии 2 см правее и 2 см ниже верхнего левого угла элемента.

Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только горизонтальное положение, а вертикальное по умолчанию будет 50%. Если заданы два значения, то первое из них - горизонтальное положение. Допускаются комбинации абсолютных единиц и процентных выражений, например, '50% 2cm'. Допускаются отрицательные значения.

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

• 'top left' или 'left top' равноценны '0% 0%'.

• 'top', 'top center' или 'center top' равноценны '50% 0%'.

• 'right top' или 'top right' равноценны '100% 0%'.

• 'left', 'left center' или 'center left' равноценны '0% 50%'.

• 'center' или 'center center' равноценны '50% 50%'.

• 'right', 'right center' или 'center right' равноценны '100% 50%'.

• 'bottom left' или 'left bottom' равноценны '0% 100%'.

• 'bottom', 'bottom center' или 'center bottom' равноценны '50% 100%'.

• 'bottom right' или 'right bottom' равноценны '100% 100%'.

примеры:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */

BODY { background: url(banner.jpeg) top center } /* 50% 0% */

BODY { background: url(banner.jpeg) center } /* 50% 50% */

BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

Если рисунок фона привязан относительно холста, изображение устанавливается относительно холста, но не элемента. К примеру:

BODY {

background-image: url(logo.png);

background-attachment: fixed;

background-position: 100% 100%;

}

В вышеприведенном примере изображение устанавливается в нижний правый угол холста.