# Свойство background-position

Свойство `background-position` задает местоположение фоновой картинки элемента. Местоположение можно задавать с помощью любых единиц для размеров. Первое значение обозначает отступ слева, второе - отступ сверху.

Можно также задавать положение ключевыми словами. В этом случае порядок значений не важен. Ключевые слова для вертикали: `top`, `center`, `bottom`. Ключевые слова по горизонтали: `left`, `center`, `right`.

## Как пользоваться ключевыми словами

Чтобы разместить картинку ключевым словом, нужно указать одно значение для вертикали и одно для горизонтали. К примеру, если указать значение `top right`, то картинка станет сверху справа.

Порядок слов неважен: можно написать `top right`, а можно - `right top`. Если есть ключевое слово `center` - его можно опускать. Например, `top center`, все равно что просто `top`. А `center center` все равно что просто `center`.

## Синтаксис

`селектор { background-position: два значения через пробел; }`

## Пример

По умолчанию фоновая картинка будет в верхнем левом углу:

`<div id="elem"></div>` `#elem { background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку в верхний правый угол:

`<div id="elem"></div>` `#elem { background-position: top right; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку в нижний правый угол:

`<div id="elem"></div>` `#elem { background-position: bottom right; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку справа и по центру по вертикали:

`<div id="elem"></div>` `#elem { background-position: right center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку по центру блока:

`<div id="elem"></div>` `#elem { background-position: center center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку на расстоянии `20px` слева и `40px` сверху:

`<div id="elem"></div>` `#elem { background-position: 20px 40px; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку на расстоянии `90%` слева и `100%` сверху:

`<div id="elem"></div>` `#elem { background-position: 90% 100%; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку на расстоянии `30px` слева и по снизу по вертикали:

`<div id="elem"></div>` `#elem { background-position: 30px bottom; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку на расстоянии `30px` слева и по центру по вертикали:

`<div id="elem"></div>` `#elem { background-position: 30px center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте разместим фоновую картинку на расстоянии `30px` сверху и по центру по горизонтали:

`<div id="elem"></div>` `#elem { background-position: center 30px; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Смотрите также

- свойство `background`,
  представляющее собой свойство-сокращение для фона

← →
↑
en ru