Свойство background-image в CSS

Свойство CSS background-image

Свойство background-image позволяет установить фоновую картинку или градиент для блочного или строчного элемента, а также создать фон для сайта в целом.

body {
  background-image: url(img.jpg);
}

Значение url() позволяет указать путь к файлу для изображения, и оно будет отображаться в качестве фона для этого элемента. Вы также можете указать в url картинку, кодированную в base64. Это выглядит так:

div {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Удобно при работе с маленькими картинками. Чтобы получить такой код, воспользуйтесь сервисами вроде https://snipp.ru/tools/base64-img. Там все очень просто: загружаете картинку и получаете готовый код для сайта. При таком использовании не производится дополнительное обращение к серверу за картинкой, что хорошо для скорости загрузки.

Вместо background-image можно использовать более общее свойство background с аргументом в виде изображения.

Для уменьшения количества обращений к серверу за картинками также рекомендуется использовать спрайты – объединенные в один файл картинки. При таком подходе при загрузке страницы произойдет только одно обращение к общему спрайту.

Для фона можно использовать большинство известных форматов: JPG, PNG, SVG, GIF-анимацию и другие.

Формат адреса изображения

Указание адреса картинки может быть абсолютным, как в первом случае, там и относительным, как во втором случае ниже.

1. background-image: url("https://websovet.pro/img.png");
2. background-image: url("images/img.jpg");

Относительный адрес определяется относительно папки сайта, откуда загружается главный HTML документ.

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

Выравнивание изображения

Для работы с фоновыми изображениями в CSS существует целый набор свойств, начинающихся со слова background. Например, по умолчанию если размер картинки больше размера элемента, то картинка будет обрезана по краям элемента. Однако это можно исправить благодаря свойству background-size, которое позволяет вписать изображение полностью, подгоняя его под размеры элемента. По умолчанию при значительно меньшем размере изображения, чем у элемента, картинка будет повторяться и занимать все пространство элемента. Это можно исправить свойством background-repeat.

background-size

Свойство background-size устанавливает размер изображения и может принимать значения:

• 100px 100px – картинка становится размером 100 на 100 пикселей, также можно использовать проценты;
• contain – устанавливает размер картинки равным размеру элемента;
• cover – увеличивает размер картинки по горизонтали и по вертикали, пока изображение не покроет весь элемент по горизонтали.

background-origin или background-clip

Идентичные свойства с одинаковыми значениями. Данные свойства указывают, где устанавливается начальная точка вставки изображения. По умолчанию начальная точка находится сразу под границей элемента в верхнем левом углу. У background-origin и clip есть следующие значения:

• border-box – начальная точка вставки изображения располагается в верхней части границы элемента. Сколько пикселей ширина границы, на столько пикселей будет урезан и фон сверху.
• content-box – изображение будет под текстом, где padding не учитывается.
• padding-box – данное значение стоит по умолчанию.

Градиенты

Еще один вариант использования фона – указать браузеру создать градиент. Вот простой пример линейного градиента:

See the Pen
linear-gradient by Андрей (@adlibi)
on CodePen.

Здесь background: linear-gradient(to right, black, white) параметры означают, что градиент будет слева направо, от черного к белому цвету.

А вот пример радиального градиента.

See the Pen
radial-gradient by Андрей (@adlibi)
on CodePen.