Евгений Резниченко - Спецификация CSS2

Значениями данного свойства являются , для спецификации изображения, или 'none', если изображение не используется.

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

'background-repeat'

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

Начальное: repeat

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Если специфицировано изображение фона, то данное свойство определяет, повторяется ли данное изображение (размножается ли), и как. Размноженное изображение покрывает области содержимого и заполнения бокса.

Значения имеют следующий смысл:

repeat

Изображение размножается горизонтально и вертикально.

repeat-x

Изображение размножается только горизонтально.

repeat-y

Изображение размножается только вертикально.

no-repeat

Изображение не размножается: выводится только одна копия изображения.

BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }

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

'background-attachment'

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

Начальное: scroll

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Если специфицировано изображение фона, то данное свойство определяет, является ли оно фиксированным относительно порта просмотра ('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] ] ] | inherit

Начальное: 0% 0%

Применяется: к элементам уровня блока и к замещаемым элементам

Наследуется: нет

Процентное: относится к размеру самого бокса

Носитель: визуальный

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

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

Если пара значений - '2cm 2cm', то верхний левый угол изображения помещается на 2cm вправо и на 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%'.

Если задано только одно значение, в процентах или единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 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' ), то изображение размещается относительно порта просмотра, а не относительно области заполнения элемента. Например,