Коротко: background-position задаёт положение фонового изображения внутри блока. Значения — ключевые слова (center, top right), проценты или пиксели. Часто используется вместе с background-size: cover, чтобы «закрепить» центр картинки, или для иконок-спрайтов.
background-position решает это.Способы задать позицию
| Значение | Смысл |
|---|---|
center |
центр картинки совпадает с центром блока |
top left |
левый верхний угол |
50% 50% |
то же, что center |
0 0 |
левый верхний угол (в пикселях) |
10px 20px |
сдвиг от левого верхнего угла |
Вкладки: примеры
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
}Самый частый случай: фото заполняет блок и центрируется. При cover картинка обрезается по краям, а center решает, какая часть останется видимой.
.hero {
background-position: center top;
}Если на фото важна верхняя часть (например, лицо человека), сместите фокус вверх: center top. Для пейзажей часто лучше center bottom.
.block {
background-position: 25% 75%;
background-size: 200px 200px;
}Проценты означают выравнивание: 25% по горизонтали — точка 25% картинки совпадает с 25% блока. На практике чаще берут 0%, 50%, 100%.
.icon {
width: 24px; height: 24px;
background: url("sprite.png") no-repeat -48px 0;
}Классическое применение — CSS-спрайты: одна картинка со множеством иконок, а позиция «вырезает» нужную. Сегодня вместо спрайтов чаще используют SVG.
background-position почти всегда работает в паре с background-size. Сначала задайте размер (cover/contain), затем подберите позицию — иначе результат непредсказуем.Несколько фоновых слоёв
.hero {
background:
linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
url("hero.jpg") center / cover no-repeat;
}Когда слоёв несколько, параметры перечисляются через запятую — по одному набору на слой. Здесь затемняющий градиент лежит поверх фотографии, а фото стоит по центру и заполняет блок.
Практика: настроить фон шапки
- Задайте
background-size: cover. - Поставьте
background-position: center. - Посмотрите на узком экране: важная часть кадра не должна обрезаться.
- При необходимости сместите фокус (
center top). - Добавьте затемнение для читаемости текста.
- Проверьте на разных разрешениях.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Фото «съезжает» на мобильном | центр содержит важный объект | center top или другой фокус |
| Картинка повторяется | нет no-repeat |
добавить |
| Позиция «не действует» | не задан размер | задать background-size |
| Иконка обрезана | неверные координаты спрайта | уточнить сдвиг |
Проверьте себя
Вопросы и ответы
Свойством background-attachment: fixed. На мобильных работает нестабильно, поэтому применяйте осторожно.
cover заполняет блок с обрезкой, contain показывает картинку целиком, оставляя пустые поля.
Перечислите слои через запятую: сначала верхний слой, затем нижние. Параметры position/size указываются для каждого слоя отдельно.
Проверьте путь к файлу, наличие background-size и то, что у блока есть высота. Пустой блок без высоты фон не покажет.
Итоги
background-positionзадаёт положение фона: слова, проценты, пиксели.- Работает в паре с
background-size. - Фокус кадра смещают (
center top), чтобы не обрезать важное. - Спрайты уступили место SVG, но приём всё ещё встречается.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.