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

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

Свойство может принимать следующие значения: `left`, `center`, `right`, а также можно указать положение фона в процентах или пикселях.

## Синтаксис

`селектор { background-position-x: значение; }`

## Пример

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

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

:

## Пример

А теперь давайте переместим фон вправо:

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

:

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

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

← →
↑
en ru