Как работать с фоновыми картинками в CSS
2026-02-21 19:17 Diff
https://skillbox.ru/media/base/kak_rabotat_s_fonovymi_kartinkami_v_css/

#База знаний

  • 2 мар 2021
  • 0

Три примера вёрстки, которые встречаются часто и пригодятся наверняка.

Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик

При разработке сайта верстальщик должен отличать контентные (информативные) изображения от декоративных.

Контентные изображения связаны со структурой и смысловым наполнением страниц. Они содержательны, поэтому их вставляем в разметку.

Декоративные изображения — это элементы оформления: разделители, маркеры, значки, фоны и так далее. Они не несут полезной информации для пользователя, поэтому их задаём средствами CSS. Так мы избавляем HTML-документ от всего лишнего.

Пример явно декоративных изображений — пиктограммы («иконки») и фоновые картинки. Научимся их верстать с помощью CSS-свойства background.

Почти на любом сайте есть блок со ссылками на соцсети и медиа — «ВКонтакте», «Одноклассники», YouTube и другие:

Изображение: Skillbox Media

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.

Здесь есть пара нюансов:

  • Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
  • Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

<ul class="social"> <li class="social__item"> <a href="#" class="social__link social__link--vk" aria-label="Мы во ВКонтакте"></a> </li> <li class="social__item"> <a href="#" class="social__link social__link--ok" aria-label="Мы в Одноклассниках"></a> </li> <li class="social__item"> <a href="#" class="social__link social__link--youtube" aria-label="Наш канал на YouTube"></a> </li> </ul>

Далее — CSS:

.social__link { display: inline-block; width: 30px; height: 30px; background-position: center; background-size: cover; background-repeat: no-repeat; } .social__link--vk { background-image: url("../img/vk.svg"); } .social__link--ok { background-image: url("../img/ok.svg"); } .social__link--youtube { background-image: url("../img/youtube.svg"); }
    • Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
    • Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
    • А вот фоновые изображения у нас разные — их мы задаём в разных классах.

    Вот и готов наш универсальный компонент. Его легко обновить и использовать повторно, когда нам понадобятся другие соцсети.

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

    Изображение: Skillbox Media

    На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.

    Сперва ничего особенного — обычная ссылка:

    <a href="mailto:mail@yahoo.com" class="email-link">mail@yahoo.com</a>

    Вся магия в CSS:

    .email-link { background-image: url("../img/mail.svg"); background-position: left center; background-size: 20px 20px; background-repeat: no-repeat; }
    • Сначала задали путь до изображения.
    • Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
    • Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.

      Дело в том, что иконка может оказаться больше блока, в котором её захотят показать. Тогда она некрасиво обрежется по бокам. Чтобы этого не произошло — указываем размеры, в которые иконка должна вписаться.

    • И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и HTML-элемента, где она задана фоном).

    Что же мы получили:

    Изображение: Skillbox Media

    Не совсем то, чего ожидали. Давайте разбираться.

    Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

    Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.

    Делается это с помощью свойства padding (внутренний отступ).

    Добавим в код такой отступ слева:

    .email-link { padding-left: 30px; background-image: url("../img/mail.svg"); background-position: left center; background-size: 20px 20px; background-repeat: no-repeat; }

    Вот теперь всё вышло как надо:

    Изображение: Skillbox Media

    На заметку: этот приём также подходит для иконок справа, сверху или снизу от текста. Например, нужна иконка справа — меняйте отступ слева на отступ справа, и позицию фона задайте тоже справа.

    Подобные блоки привлекают внимание. Фоном идёт картинка, а поверх неё текст. Давайте разбираться, как такое сделать.

    Скриншот: Skillbox Media

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

    Однако мы не всегда знаем заранее, сколько контента будет внутри блока — не изменят ли потом его содержимое. Могут поменять заголовок, сделать его больше на две-три строки — и тогда всё сломается. Поэтому фон нужно делать адаптивным. Итак, к коду.

    Создаём простую HTML-разметку:

    <article class="card"> <h3 class="card__title">Мальдивские острова</h3> <p class="card__price">от 55 000 р</p> <a href="tel:+74932200080" class="card__link">+7 (4932) 2000-80</a> </article>

    Главное у нас снова в CSS:

    .card { padding: 30px; background-image: url("../img/content-bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; }
    • Чтобы даже при увеличении текста ничего не сломалось — применяем внутренний отступ (padding). Таким образом уходим от фиксированных размеров: контент можно менять, при этом блок и его фон будут подстраиваться.
    • Устанавливаем background-repeat в no-repeat. По умолчанию применяется repeat, но с ним фоновая картинка повторяется, пока не заполнит собой блок, а нам такого не нужно.
    • Задаём background-position: center — выравниваем картинку по центру контейнера (как по вертикали, так и по горизонтали).
    • А теперь самое важное — масштабируем фон. Задаём свойству background-size значением cover. Это и позволит нашей картинке подстроиться под размеры блока (её ширина или высота будет равняться ширине или высоте блока, а пропорции сохранятся).

    Вот мы и сделали фон адаптивным.


    Бесплатный курс по Python ➞
    Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу