Как правильно реализовать фон с изображением в макете

При вёрстке макетов часто возникает задача разместить фоновое изображение, которое должно точно совпадать с дизайном. Если псевдоэлемент ::before или ::after «съезжает» в сторону, это указывает на неправильное позиционирование или отсутствие нужных свойств. В этой статье разберём несколько эффективных способов, как сделать фон в CSS, чтобы он не смещался.

Почему псевдоэлемент смещается?

Псевдоэлементы ::before и ::after по умолчанию являются строчными (inline) элементами. Если не задать им display: block или position: absolute, они будут вести себя непредсказуемо. Также частая причина - отсутствие position: relative у родителя. Чтобы исправить смещение, нужно:

• Установить родительскому блоку position: relative.
• Для псевдоэлемента указать position: absolute, top: 0, left: 0.
• Задать width: 100% и height: 100%.
• Использовать background-size: cover или contain для масштабирования.

Способ 1: Псевдоэлемент с фоном

Этот метод подходит, если изображение не должно влиять на содержимое и не требует индексации поисковиками. Пример кода:

.block { position: relative; overflow: hidden; }
.block::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('image.jpg') no-repeat center/cover; z-index: -1; }

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

Способ 2: Свойство background-image на самом блоке

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

.block { background: url('image.jpg') no-repeat center/cover; min-height: 300px; }

Если изображение всё равно «съезжает», проверьте background-position - возможно, нужно указать center или конкретные проценты.

Способ 3: Тег img с object-fit

Когда изображение должно быть доступно для SEO (например, для поиска по картинкам), используйте <img> с object-fit: cover. Это обеспечит точное заполнение контейнера без искажений:

.block { position: relative; width: 100%; height: 400px; overflow: hidden; }
.block img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

Этот способ особенно полезен, если изображение может меняться динамически.

Как избежать смещения фона в макете

Чтобы фон не «съезжал»:

• Всегда задавайте размеры контейнера (высоту, ширину или соотношение сторон).
• Используйте background-size: cover для равномерного заполнения.
• При работе с псевдоэлементами не забывайте про z-index, чтобы фон был под контентом.
• Проверяйте вёрстку на разных разрешениях - иногда смещение вызвано отсутствием адаптивности.

Заключение

Выбор метода зависит от задачи: для простого декоративного фона подойдёт background-image на блоке или псевдоэлемент; для семантически значимых изображений - <img> с object-fit. Главное - следить за позиционированием и размерами контейнера, чтобы фон не смещался. Если псевдоэлемент продолжает «съезжать», проверьте, не перекрывает ли его другие CSS-правила.