Свойство background-position задает местоположение фоновой картинки элемента.

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

селектор {
	background-position: CSS единицы | проценты | ключевые слова;
}

CSS 3

В CSS3 можно задавать несколько картинок фона одновременно с помощью свойства background-position. Если для элемента задано несколько фонов, то их положение в background-position перечисляется через запятую.

селектор {
	body{
	background-image: url('путь к картинке1'), url('путь к картинке2');
	background-position: top left, 100% 30%;
}
}

Значения

Местоположение можно задавать словами, с помощью процентов или других CSS единиц. Первое значение обозначает отступ слева, второе - отступ сверху.

Отступ справа и снизу сделать нельзя!

Значение Описание
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%
В правом нижнем углу.
inherit Наследует значение родителя.

Значение по умолчанию: 0% 0% - верхний левый угол.

Примеры

Пример

В данном примере для body установлена фоновая картинка-узор. Свойство background-repeat установлено в no-repeat - картинка не будет повторяться вообще. Свойство background-position установлено как top left - верхний левый угол:

body {
	background-image: url("bg.jpg");
	background-repeat: no-repeat;
	background-position: top left;
}

Посмотреть пример.

Пример

Свойство background-position установлено как top right - верхний правый угол:

body {
	background-image: url("bg.jpg");
	background-repeat: no-repeat;
	background-position: top right;
}

Посмотреть пример.

Пример

Свойство background-position установлено как center right - справа по центру:

body {
	background-image: url("bg.jpg");
	background-repeat: no-repeat;
	background-position: center right;
}

Посмотреть пример.

Пример

В данном примере для body установлена фоновая картинка-узор. Свойство background-repeat установлено в repeat-y - картинка будет повторяться по оси Y. Свойство background-position установлено как 50px 0px - это значит, что картинка не будет прижата к левому краю, а отойдет от него на 50px:

body {
	background-image: url("bg.jpg");
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position: 50px 0px;
}

Посмотреть пример.

Пример

В данном примере для body установлено два фона: один будет полосой справа, другой - полосой слева:

body {
	background-image: url('bg1.jpg'), url('bg2.jpg');
	background-repeat: repeat-y, repeat-y;
	background-position: top left, top right;
}

Посмотреть пример.