Свойство background-position

Свойство background-position позволяет задать позицию фонового изображения (в том случае, если значение свойства background-repeat равно no-repeat, repeat-x или repeat-y).

Если для элемента HTML значение свойства background-attachment равно scroll или свойство background-attachment не задано, границ элемента. Если же значение свойства background-attachment равно fixed, позиция фонового изображения определяется относительно окна просмотра.

Значе­ниями свойства background-position являются координаты x и y привязки определенных точек изображения и границ элемента. Значения x и y можно задавать:

· в процентах;

· в абсо­лютных единицах длины;

· с использованием ключевых значений.

Значения в процентах помещают точку изображения, расположенную на расстоянии в указанное в x количество процентов ширины от левого края и в указанное в y количество процентов высо­ты от верхнего края, в точно такую же точку в границах элемента. Так, пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например 10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высо­ты от верхнего края, в точно такую же точку в границах элемента.

Значения в абсо­лютных единицах длины, например 10mm 5mm, размещает верхний левый угол изображения на 10 мм правее и на 5 мм ниже левого верхнего угла в границах элемента.

Для свойства background-position можно задать следующие ключевые значения: top, right, bottom, left и center. Допустимые комбинации ключевых значений вместе с эквивалентными значениями в процентах (для одиночного изображения) представлены в табл. 4.3.6.

Таблица 4.3.6 Ключевые значения для свойства background-position и их допустимые комбинации

Комбинация координат x и y	Значение	Положение изображения в элементе или окне просмотра Web-страницы
left top или top left	0% 0%
top center или center top	50% 0%
right top или top right	100% 0%
center left или left center	0% 50%
center center	50% 50%
center right или right center	100% 50%
bottom left или left bottom	0% 100%
center bottom или bottom center	50% 100%
bottom right или right bottom	100% 100%

Если для свойства background-position задано только значение x, то для y предполагается значение center (50%).

Пример 4.3.53. Задание свойства background-position:

1. Для абзаца

<p class="position">Вывод фонового изображения

относительно этого элемента абзаца</p>

задано следующее правило стилей:

.position

{

font-size:40pt;

background-repeat: no-repeat;

background-position: 10% 20%;

background-color: cyan;

background-image: url('BackgroundComputer.png')

}

то вывод Web-страницы для этого абзаца будет иметь следующий вид:

2. Если в примере 4.3.53(1) изменить значение свойства background-position на 14cm 3.2cm, то вывод Web-страницы станет следующим:

3. Если в примере 4.3.53(1) изменить значение свойства background-position на top center, а значение свойства background-repeat на repeat-y, то вывод Web-страницы станет следующим:

4. Если для тела документа HTML, содержащего абзац

<p style="font-size: 40pt">Вывод фонового изображения

относительно окна просмотра</p>

задано следующее правило стиля

body

{

background-repeat: no-repeat;

background-position: right;

background-attachment: fixed;

background-image: url('BackgroundComputer.png')

}

то вывод Web-страницы для этого абзаца будет иметь следующий вид: