Центрирование фонового изображения в div через CSS

Быстрый ответ

Для расположения фонового изображения в центре элемента div используйте свойство CSS background-position: center;. Чтобы изображение правильно подстраивалось под размеры div, примените background-size: cover;.

div {
  background: url('awesome-image.jpg') no-repeat center;
  background-size: cover;
}

Это сделает изображение центрированным, сохраняя его пропорции, и позволит создать безупречный пользовательский интерфейс.

Менеджмент свойствами фонового изображения

Получить гармоничное расположение фонового изображения внутри div можно, зная и умея работать со следующими CSS свойствами:

• background-position: Определяет положение изображения. center автоматически выровняет его и горизонтально, и вертикально.

• background-size: Регулирует размер изображения. Значение cover обеспечивает заполнение всего div изображением, при этом его границы могут быть незначительно обрезаны.

• background-repeat: Устанавливает правило повторения изображения. no-repeat делает фон статичным, без повторений внутри контейнера.

Использование этих свойств позволит вам добиться идеального баланса изображения для разных задач.

Царствующие сценарии центрирования

Фон на весь экран

Если замысел таков, что изображение должно полностью заполнить div:

div {
  background-image: url('awesome-image.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Подробнее об этом расскажет наш спикер на видео

Сохранение исходного размера

Когда необходимо отцентрировать изображение, сохраняя его размер:

div {
  background-image: url('awesome-image.jpg');
  background-position: center;
  background-repeat: no-repeat;
}

Использование спрайт-листов

Управление положением отдельного элемента из спрайт-листа:

div {
  background-image: url('spritesheet.png');
  background-position: 50% 75%;
  background-repeat: no-repeat;
}

Центрирование по одной оси

Для выравнивания по вертикали или горизонтали.

• Вертикально:

  div {
    background-image: url('awesome-image.jpg');
    background-position: center 50%;
    background-repeat: no-repeat;
  }

• Горизонтально:

  div {
    background-image: url('awesome-image.jpg');
    background-position: 50% center;
    background-repeat: no-repeat;
  }

Визуализация

Визуальна представьте процесс выравнивания картинки по центру стены в галерее:

Стена (div) – это место для изображения. Картина (фоновое изображение) стремится занять центральное место.

🧱🖼️🧱

Цель достигнута — картина идеально расположена, что обеспечивает background-position!

.wall {
  display: flex;
  align-items: center;
  justify-content: center;
}

Работа с несколькими фоновыми изображениями

Составление композиции с несколькими слоями фоновых изображений:

div {
  background-image: url('img1.jpg'), url('img2.jpg');
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

Так все изображения сложатся слоями, как слои в лазанье.

Адаптивное центрирование

В адаптивном веб-дизайне изображение подстраивается под любые размеры экранов:

div {
  background-image: url('awesome-image.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto; 
}

@media screen and (max-width: 600px) {
  div {
    background-size: auto 100%; 
  }
}

Такое изображение будет выглядеть безупречно на любом устройстве, что улучшит удобство интерфейса.

Поддержка устаревших браузеров

Используйте запасной вариант для реализации совместимости с устаревшими браузерами:

div {
  background-image: url('awesome-image.jpg');
  background-repeat: no-repeat;
  background-position: center; 
  background-position-x: 50%;
  background-position-y: 50%;
}

Полезные материалы

1. Центрирование в CSS: Полное руководство | CSS-Tricks — всесторонний разбор всех методов центрирования элементов.
2. background-size – CSS | MDN — документация MDN по свойству background-size.
3. Свойство background в CSS — обобщенный обзор свойств background и их взаимодействия.
4. Как отцентрировать элемент с "position: absolute" · Stack Overflow — обсуждение и примеры центрирования элементов.
5. Изменение размера фоновых изображений с CSS3 — SitePoint — статья о тонкостях изменения размеров фоновых изображений.
6. Адаптивные фоновые изображения в CSS — Smashing Magazine — советы по созданию адаптивных фоновых изображений.
7. background-position | CSS-Tricks — подробный разбор свойства background-position.