Фон: цвет, изображение и градиенты

Учимся задавать фон элементов: сплошной цвет, картинку и плавные градиенты.

Группа свойств background-* управляет фоном элемента — слоем, который рисуется позади его содержимого.

background-color — сплошной цвет

Самое простое: залить фон цветом (в любом из форматов прошлого урока).

.card {
  background-color: #f5f5f5;
  color: #222;
}

Карточка получит светло-серый фон и тёмный текст. Следите за контрастом фона и текста — иначе читать будет тяжело.

background-image — картинка

В качестве фона можно поставить изображение через функцию url().

.hero {
  background-image: url("photo.jpg");
}

По умолчанию картинка показывается в своём размере и повторяется плиткой, заполняя весь элемент. Этим управляют дополнительные свойства.

Повтор, позиция и размер

.hero {
  background-image: url("photo.jpg");
  background-repeat: no-repeat;  /* не повторять */
  background-position: center;   /* по центру */
  background-size: cover;        /* заполнить блок целиком */
}

background-repeat: no-repeat — показать картинку один раз.
background-position: center — выровнять по центру блока.
background-size: cover — масштабировать так, чтобы фото покрыло весь блок (часть может обрезаться). Альтернатива contain вписывает картинку целиком, возможно оставив пустые поля.

Связка no-repeat + center + cover — стандартный рецепт для большой «шапки» (hero) с фоновым фото на всю ширину.

Сокращённое свойство background

Всё это можно записать одной строкой через background:

.hero {
  background: url("photo.jpg") center / cover no-repeat;
}

Размер указывают после позиции через слэш. Запись компактная, но в начале удобнее писать свойства по отдельности.

Градиенты

Градиент — это плавный переход между цветами. Технически это «изображение», поэтому его задают тоже через background-image (или background), но без url. Линейный градиент создаёт функция linear-gradient.

.banner {
  background: linear-gradient(to right, #6a11cb, #2575fc);
}

Фон плавно перетечёт слева направо из фиолетового в синий. Первый аргумент — направление (to right, to bottom или угол вроде 45deg), дальше — цвета. Цветов может быть больше двух:

.rainbow {
  background: linear-gradient(45deg, red, orange, yellow, green);
}

Есть и радиальный градиент (radial-gradient) — расходится из центра кругами. Градиенты любят за то, что они «лёгкие»: не нужно грузить картинку, всё рисует браузер.

Полупрозрачный фон поверх фото

Частый приём — затемнить фото градиентом, чтобы белый текст читался. Можно наложить градиент и картинку слоями:

.hero {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("photo.jpg") center / cover;
  color: white;
}

Сверху ложится полупрозрачный чёрный слой, под ним — фото. Текст на таком фоне читается уверенно.

Итог

background-color заливает фон цветом, background-image: url(...) — картинкой.
Рецепт фоновой шапки: no-repeat + center + cover.
linear-gradient() рисует плавный переход цветов без загрузки картинки.