Как работать с фоновыми картинками в CSS

Иконка соцсети без текста

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

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать 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--fb" aria-label="Мы в Фейсбуке*"></a>
  </li>
  <li class="social__item">
    <a href="#" class="social__link social__link--insta" aria-label="Мы в Инстаграме*"></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--fb {
  background-image: url("../img/fb.svg");
}
 
.social__link--insta {
  background-image: url("../img/instagram*.svg");
}

• Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
• Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
• А вот фоновые изображения у нас разные — их мы задаём в разных классах.

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

Блок с контентом поверх фонового изображения

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

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

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

Создаём простую 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. Это и позволит нашей картинке подстроиться под размеры блока (её ширина или высота будет равняться ширине или высоте блока, а пропорции сохранятся).

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