По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение «100px 200px» располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right.
В таблице приведено несколько примеров позиционирования элементов.
| Значение
| Описание
|
| background-position: 2cm 2cm
| Рисунок расположен на 2 см слева и на 2 см сверху
|
| background-position: 50% 25%
| Рисунок расположен по центру и на четверть экрана сверху
|
| background-position: top right
| Рисунок расположен в правом верхнем углу страницы
|
Например, для того, что бы разместить изображение в правом нижнем углу экрана в файле style.css можно использовать следующий код:
body {
background-color: #FFCC66;
background-image: url("Smile.png");
background-repeat: repeat-у;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
