CSS · справочник и практика

Свойство background

background отвечает за фон элемента. Это может быть обычный цвет, изображение, градиент или сразу несколько слоёв. Разберём запись по частям, чтобы она перестала выглядеть как длинная непонятная строка.

Начни с цвета

Для однотонного фона достаточно свойства background-color. Оно подходит карточкам, кнопкам и крупным секциям. Цвет желательно задавать всегда, даже если поверх него будет картинка: пользователь увидит запасной фон, пока изображение загружается.

.card {
  background-color: #eef2ff;
}

Фоновое изображение

Путь к файлу задаётся через url(). По умолчанию небольшая картинка повторяется по горизонтали и вертикали. Для обложки обычно нужны дополнительные настройки.

.hero {
  min-height: 420px;
  background-image: url('/assets/cover.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

cover увеличивает изображение так, чтобы оно полностью закрыло блок. Часть картинки может обрезаться — это нормальное поведение. Если важно показать изображение целиком, попробуй contain, но будь готов к свободному месту по краям.

Короткая запись

Все основные параметры можно объединить. Перед размером ставится косая черта: сначала позиция, затем background-size.

.hero {
  background: #eef2ff url('/assets/cover.webp')
              center / cover no-repeat;
}

Градиент поверх фотографии

Первый перечисленный фон находится сверху. Поэтому полупрозрачный градиент можно использовать как затемнение, а изображение поставить вторым слоем.

.hero {
  color: white;
  background:
    linear-gradient(rgb(15 23 42 / .65), rgb(15 23 42 / .65)),
    url('/assets/cover.webp') center / cover no-repeat;
}

Частые ошибки

• Нет запасного цвета, и во время загрузки виден пустой блок.
• Тяжёлая фотография используется без оптимизации и замедляет страницу.
• Текст сливается с изображением из-за недостаточного контраста.
• Путь к файлу считается от CSS-файла, хотя ожидался путь от корня сайта.

Что изучить дальше

Перейди к свойству color, настрой внутренние отступы и ограничь содержимое через max-width.