Поиск

Фон

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

Свойства фона не наследуются, но фон родительского блока всегда будет виден, т.к. по умолчанию в качестве начального значения свойства 'background-color' выступает значение 'transparent'.

Фон блока, порождаемого корневым элементом, покрывает всю область представления.

Разработчикам HTML-документов рекомендуется задавать фон для элемента BODY, а не для элемента HTML. Агенты пользователей при оформлении фона должны придерживаться следующей иерархии приоритетов: если значение свойства 'background' элемента HTML отлично от 'transparent', то следует использовать его. В противном случае следует использовать значение свойства 'background' элемента BODY. Если в результате получится значение 'transparent', то отображаемый фон окажется неопределенным.

В соответствии с этими правилами область представления, лежащая в основе следующего HTML-документа, будет иметь "мраморный" фон:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Установка фона области представления</TITLE>
<STYLE type="text/css">
BODY { background: url("http://style.com/marble.png") }
</STYLE>
</HEAD>
<BODY>
<P>Я использую мраморный фон.
</BODY>
</HTML>
Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
'background-color'

Значение: <цвет> | transparent | наследуемое
Начальное значение: transparent
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Это свойство устанавливает цвет фона элемента равным <цвет> или ключевому слову 'transparent', благодаря которому все цвета, лежащие под элементом, становятся видными.

H1 { background-color: #F00 } 'background-image'

Значение: <uri> | none | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

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

В качестве значения этого свойства может выступать <uri> графического объекта либо значение '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: white url("pendant.gif");
background-repeat: repeat-y;
background-position: center;
}

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

'background-attachment'

Значение: scroll | fixed | наследуемое
Начальное значение: scroll
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение 'fixed') или будет перемещаться вместе с документом (значение 'scroll') в процессе его прокрутки.

Даже в случае фиксации изображения оно остается видимым только тогда, когда находится в области, предназначенной для оформления фона или отступов элемента. Поэтому изображение может оставаться невидимым до тех пор, пока его копии не будут расположены мозаикой ('background-repeat: repeat').

В следующем примере формируется бесконечная вертикальная полоса, которая остается "приклеенной" к окну просмотра во время прокрутки элемента.

BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}

Агенты пользователей могут интерпретировать значение 'fixed' как 'scroll'. Однако рекомендуется, чтобы значение 'fixed' все же интерпретировалось корректно, по крайней мере, для элементов HTML и BODY, т.к. у авторов не существует возможности предоставления изображения только для тех браузеров, которые поддерживают значение 'fixed'. Дополнительную информацию можно получить в разделе, посвященном конформности.

'background-position'

Значение: [ [<проценты> | <длина> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | наследуемое
Начальное значение: 0% 0%
Область применения: элементы структурного уровня и замещаемые элементы
Наследование: нет
Процентное задание: относительно размеров самого блока
Устройства: визуального форматирования

Если задано фоновое изображение, то данное свойство определяет его начальное положение. Значения имеют следующий смысл:

<проценты> <проценты>

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

<длина> <длина>

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

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%'.

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

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% */

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

BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}

В представленном выше примере изображение (одиночное) помещается в нижнем правом углу окна просмотра.

'background'

Значение: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | наследуемое
Начальное значение: не определено для свойств стенографического типа
Область применения: все элементы
Наследование: нет
Процентное задание: допускается в свойстве 'background-position'
Устройства: визуального форматирования

Свойство 'background' является свойством стенографического типа, используемым для определения отдельных свойств фона ('background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') одновременно.

Сначала свойство 'background' устанавливает всем отдельным свойствам фона их начальные значения, а затем явно назначает им те значения, которые были заданы в объявлении.

В первом правиле следующего примера было задано значение только для свойства 'background-color', в то время как всем остальным свойствам были присвоены их начальные значения. Во втором правиле явно заданы значения всех отдельных свойств.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }