Как поместить картинку под другой текст: полное руководство по CSS

При вёрстке веб-страниц часто возникает задача расположить фоновое изображение или декоративную картинку позади текстового контента. В этой статье мы разберём несколько надёжных способов, как поместить картинку под текст с помощью CSS, включая использование position, z-index и правильного порядка элементов в HTML.

Почему изображение может перекрывать текст?

Основная причина - неправильное позиционирование элементов. По умолчанию все блочные и строчные элементы располагаются в порядке их следования в HTML-разметке. Если картинка идёт после текста, она будет отображаться поверх него. Чтобы это исправить, нужно изменить порядок наложения с помощью CSS-свойства z-index или перестроить структуру документа.

Способ 1: Использование position и z-index

Самый популярный метод - задать относительное позиционирование контейнеру и абсолютное - картинке, а затем управлять слоями через z-index. Текст при этом должен иметь больший z-index, чем изображение.

Пример CSS-кода:

.wrapper { position: relative; }
.background__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.content { position: relative; z-index: 1; }

В этом случае картинка станет фоном, а текст будет отображаться поверх неё.

Способ 2: Использование CSS-свойства background-image

Если изображение должно быть строго фоновым, лучше использовать background-image для родительского блока. Такой подход не требует манипуляций с z-index и обеспечивает корректное отображение на всех устройствах.

.wrapper { background-image: url('assets/background.png'); background-size: cover; background-position: center; }

Текст внутри .wrapper будет автоматически располагаться поверх фона.

Способ 3: Изменение порядка элементов в HTML

Иногда достаточно просто переместить блок с изображением перед блоком с текстом в HTML-разметке. Например, сначала идёт <div class="background">, а затем <div class="content">. При этом текст будет выше по слоям, так как он объявлен позже.

Однако этот метод менее гибкий, так как нарушает семантическую структуру страницы.

Частые ошибки при размещении картинки под текстом

• Забыли указать position: relative для родительского контейнера - абсолютное позиционирование будет считаться относительно окна браузера.
• Неправильные значения z-index - текст должен иметь z-index больше, чем у изображения.
• Изображение не имеет ширины и высоты - при абсолютном позиционировании задавайте размеры явно.

Как проверить, что картинка действительно под текстом?

Используйте инструменты разработчика в браузере (F12). Во вкладке Elements вы увидите порядок слоёв, а в Computed - значения z-index и position. Также можно временно добавить opacity: 0.5 к тексту, чтобы убедиться, что фон виден сквозь него.

Заключение

Поместить картинку под текст можно тремя основными способами: через position: absolute + z-index, через background-image или изменив порядок элементов. Рекомендуем использовать второй метод для фоновых изображений - он проще и надёжнее. Если же картинка должна быть интерактивной или анимированной, выбирайте первый вариант с правильным позиционированием.