Справочник HTML & CSS

background-position

Где внутри блока находится фоновая картинка.

Синтаксис

background-position: x y;

Значения

Параметр	Тип	Описание
center \| top \| right \| bottom \| left	keyword	Ключевые слова, одно или два: `right bottom`.
x y	length	Смещения от левого верхнего угла: `20px 10px`, `30% 50%`.

Примеры

Одна и та же картинка, обрезанная слева, по центру и справа:

<style>
  div {
    display: inline-block;
    width: 120px; height: 120px;
    border: 1px solid gray;
    background: url(/media/photo-400x250.jpg) no-repeat;
    background-size: auto 120px;
  }
</style>
 
<div style="background-position: left;"></div>
<div style="background-position: center;"></div>
<div style="background-position: right;"></div>

Примечания

С background-size: cover положение решает, какая часть фото останется видна, — для портрета center top сохранит лицо.

См. также

background-size — Размер фоновой картинки.
background-image — Одна или несколько фоновых картинок: файлы или градиенты.
object-position — Какая часть обрезанной `<img>` или `<video>` остаётся видна.

Вопросы и ответы по теме

Как поставить картинку на фон

В учебнике

Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.

Спасибо, что читаете!