5.3.6 Определение положения фона ('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%;

}

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

5.3.7 Определение свойств фона в целом ('background')

Значение: <background-color> || <background-image>

|| <background-repeat> || <background-attachment>

|| <background-position>

По умолчанию: для обобщающего свойства не определено

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

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

Процентное выражение: применительно к <background-position>

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

Возможные значения обобщающего свойства "фон" включают совокупность возможных значений каждого из составляющих свойств.

BODY { background: red }

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

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