CSS свойство background-position

Определение и применение

CSS свойство background-position задает положение (позицию) фонового изображения. По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется по вертикали и горизонтали.

Настройка фона рассмотрена в уроке «Работа с фоном элемента в CSS».

Попробуйте значения background-position

Цветная плитка имеет размер 64 × 64 px и не повторяется. Меняется её положение внутри области фона.

Значение свойства

background-position: left top

HTML и CSS примера
HTML
<div class="demo-target" aria-label="Область фона"></div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  color: #172c3d;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background-image: linear-gradient(135deg, #ef803c 50%, #245a85 50%);
  background-size: 64px 64px;
  background-repeat: no-repeat;
  background-position: left top;
}

Поддержка браузерами

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.background-position
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
background-position✓1✓12✓1✓3.5✓1✓18✓4✓14✓1✓1.0✓4.4✓1
bottom✓1✓79✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
center✓1✓79✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
left✓1✓79✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
Несколько фонов✓1✓12✓3.6✓10.5✓1.3✓18✓4✓14✓1✓1.0✓4.4✓1
right✓1✓79✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
Side-relative values (such as bottom 10% right 20%)✓25✓12✓13✓10.5✓7✓25✓14✓14✓7✓1.5✓4.4✓7
top✓1✓79✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
x-end××××✓26×××✓26××✓26
x-start××××✓26×××✓26××✓26
y-end××××✓26×××✓26××✓26
y-start××××✓26×××✓26××✓26

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
background-position: <bg-position>#;

/* Глобальные значения */
background-position: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. # — одно или несколько значений через запятую для фоновых слоёв. <bg-position> — позиция одного слоя; грамматика приведена ниже.

CSS
/* Один компонент */
<bg-position> = left | center | right | top | bottom | <length-percentage>

/* Два компонента */
<bg-position> = [ left | center | right | <length-percentage> ]
                  [ top | center | bottom | <length-percentage> ]

/* Именованные края с необязательными смещениями */
<bg-position> = [ center | [ left | right ] <length-percentage>? ] &&
                  [ center | [ top | bottom ] <length-percentage>? ]

<length-percentage> — длина или процент; ? — необязательная часть; && требует обе группы в любом порядке. Например, top left и right 12px bottom 20px допустимы.

JavaScript синтаксис:

JavaScript
element.style.backgroundPosition = "center";

Начальное значение свойства

0% 0%.

Значения свойства

Значения background-position
Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 		Задает положение изображения. Именованные края допускают оба порядка: left top и top left. Если вы указываете только одно ключевое слово, другое значение будет center.
x% y% Задает положение изображения. Первое число задаёт горизонтальное положение, второе — вертикальное. Левый верхний угол имеет 0% 0%. В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%. Начальное значение.
x y Задает положение изображения. Первое число задаёт горизонтальное положение, второе — вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.
Смещение от края Три или четыре компонента задают отступ от именованного края: right 12px bottom или right 12px bottom 20px.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства background-position устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Для нескольких фоновых изображений значения перечисляют через запятую в порядке background-image: первый слой находится сверху. Короткий список повторяется до числа изображений, лишние значения не используются.

Как рассчитываются проценты

Процент относится к разности размера области позиционирования и размера изображения: (ширина области − ширина изображения) × процент. Например, при ширине области 300px и изображения 100px значение 50% даёт смещение 100px. Если размеры равны, изменение процента по этой оси не сдвигает изображение. Отрицательные длины и проценты допустимы.

Спецификация

CSS Backgrounds and Borders Module Level 3.

Наследуется

Нет.

Анимируемое

Да, как повторяемый список позиций: длины и проценты интерполируются плавно. Списки разной длины повторяются до общей длины.

Примеры, попробуйте сами

Положение изображения

Изображение не повторяется. Замените center на left top или right 12px bottom 12px. Сравните привязку к краю и отступ от него.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: repeating-conic-gradient(#fff 0% 25%, #e1e7ed 0% 50%) 0 / 20px 20px;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Результат</h3>
    <div class="sample"></div>
  </section>
</div>
style.css
CSS
.sample {
    background-image: url('assets/tile.svg');
    background-size: 80px 50px;
    background-repeat: no-repeat;
    background-position: center;
}

Проценты и свободное место

Исходная ширина блока — 240px, фона — 80px: при 50% смещение равно (240 − 80) × 0,5 = 80px. На узком экране ширина блока уменьшается. В варианте B фон занимает 100% ширины, поэтому свободного места нет. Измените 50% на 100% у обоих блоков: первый рисунок сдвинется, второй — нет. Затем задайте второму background-size: 50% 80px.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
    background: #fff;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 24px;
}
section {
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.sample {
    min-height: 160px;
    outline: 2px solid #607589;
}
.sample {
    background-color: #edf4f8;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="sample"></div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="sample full-width"></div>
  </section>
</div>
style.css
CSS
.sample {
    width: 240px;
    max-width: 100%;
    height: 160px;
    background-image: linear-gradient(135deg, #245a85 50%, #ef803c 50%);
    background-repeat: no-repeat;
    background-size: 80px 80px;
    background-position: 50% center;
}
.full-width {
    background-size: 100% 80px;
}