CSS background: цвета, изображения, градиенты и множественные фоны — практическое руководство

Запрос, который часто вбивают в поиск: «CSS background: полное руководство с примерами». В этой статье вы разберёте составное свойство background, его «длинные» свойства, градиенты и множественные слои. Покажу практические паттерны для hero-блоков, карточек, скелетонов и логотипов, а также подводные камни сокращённой записи.

Что такое фон в CSS и как он наслаивается

Фон — это слой(и) за содержимым элемента. Он может состоять из цвета, изображений и градиентов. Слои можно комбинировать запятыми: первый в списке — верхний слой, последний — нижний. Цвет фона всегда находится под всеми слоями изображений и градиентов.

Составное свойство и «длинные» аналоги

Сокращённая запись background управляет сразу несколькими свойствами. Её эквиваленты по отдельности:

• background-color
• background-image
• background-repeat
• background-position
• background-size
• background-attachment
• background-origin
• background-clip

Популярный шаблон с сокращением:

.hero {
  /* позиция / размер повтор прикрепление источник отсечение */
  background: center / cover no-repeat fixed border-box padding-box;
  background-image: url('hero.webp');
  background-color: #0b1221; /* фолбэк под изображением */
}

Важный подводный камень сокращений

Любое новое присваивание background сбрасывает ВСЕ его под-свойства к initial, если вы их не указали снова. Поэтому для ховеров и состояний лучше менять конкретные «длинные» свойства.

/* Плохо: пропадёт изображение при :hover */
.card { background: url(card.webp) center/cover no-repeat; }
.card:hover { background: #111; }

/* Хорошо: меняем только цвет-подложку */
.card { 
  background: url(card.webp) center/cover no-repeat; 
  background-color: #0e0e10;
}
.card:hover { background-color: #111; }

Цвет фона и фолбэк под изображением

Всегда задавайте background-color вместе с картинкой или градиентом — это улучшает восприятие при медленной загрузке и в high-contrast режимах. Часто используют близкий к доминирующему цвет изображения оттенок.

background-image: url(), градиенты, несколько слоёв

Слой может быть ссылкой на файл или функцией-градиентом. Несколько слоёв разделяются запятой. Порядок: первый — верхний.

.overlay-hero {
  background-image: 
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2)),
    url('hero@1x.webp');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: #0a0a0a;
}

Позиция и размер: cover vs contain

• background-size: cover — заполняет контейнер, обрезая лишнее;
• background-size: contain — вписывает целиком, возможны «поля».

.hero { background: center / cover no-repeat url('banner.webp'); }
.logo-box { background: center / contain no-repeat url('brand.svg'); }

Комбинируйте с background-position. Например, чтобы «закрепить» важную область снимка по горизонтали:

.product-hero {
  background-image: url('shoe.webp');
  background-position: 80% center; /* смещаем важный объект вправо */
  background-size: cover;
}

Повторение и спрайты

repeat по умолчанию тайлит изображение. Для иконок используйте no-repeat и точное позиционирование. Со спрайтами:

.icon {
  width: 24px; height: 24px;
  background: url('sprite.png') no-repeat;
}
.icon--search { background-position: -48px -24px; }

Градиенты: linear, radial, conic

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

/* Линейный градиент с углом */
.btn {
  background: linear-gradient(135deg, #7c5cff, #00d4ff);
}

/* Радиационный градиент для «светового пятна» */
.card {
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 60%),
                    linear-gradient(#101217, #0b0d12);
}

/* Конический градиент для диаграмм/декора */
.badge {
  background: conic-gradient(from 90deg, #ff6a00, #ffd100, #00e1ff, #ff6a00);
}

Повторяющиеся паттерны без изображений:

.stripes {
  background: repeating-linear-gradient(45deg, #f4f6fa 0 10px, #e8ecf3 10px 20px);
}

Множественные фоны и порядок слоёв

Первый слой в background — поверх остальных. Это удобно для затемнения фотографий поверх картинки.

.hero-dark {
  background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.3)),
    url('mountains.webp') center/cover no-repeat;
  color: #fff;
}

Retina и современные форматы: image-set()

Подключайте разные варианты под плотность пикселей и форматы (WebP/AVIF):

.banner {
  background-image: image-set(
    url('hero.avif') type('image/avif') 1x,
    url('hero@2x.avif') type('image/avif') 2x,
    url('hero.webp') type('image/webp') 1x,
    url('hero@2x.webp') type('image/webp') 2x
  );
  background-size: cover;
  background-position: center;
  background-color: #0b0d10; /* фолбэк */
}

background-attachment: fixed — осторожно на мобильных

Эффект параллакса с fixed часто лагает на iOS/Android. Рассмотрите псевдоэлемент с position: fixed вместо background-attachment, либо используйте sticky/transform-анимации для эффекта без артефактов.

origin и clip: где рисуется фон

background-origin управляет началом координат (border-box, padding-box, content-box). background-clip — где обрезать фон. Трюк с клипом по тексту:

.text-gradient {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* делает видимым градиент через текст */
}

Практические рецепты

1) Hero с затемнением и адаптивом

.hero {
  min-height: 60vh;
  display: grid; place-items: center;
  text-align: center; color: #fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.2)),
    image-set(url('hero.avif') type('image/avif') 1x, url('hero@2x.avif') type('image/avif') 2x);
  background-size: auto, cover;
  background-position: center, 70% center; /* чуть сдвигаем фокус */
  background-repeat: no-repeat;
}

2) Логотипы или скриншоты без обрезания

.logo-box {
  width: 220px; height: 120px; border-radius: 12px; background-color: #0f1420;
  background: center/contain no-repeat url('logo.svg');
}

3) «Скелетон» с шиммером без изображений

.skeleton {
  border-radius: 8px; height: 16px;
  background: linear-gradient(100deg, #f1f3f7 30%, #e6eaf1 50%, #f1f3f7 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

4) Тонкий паттерн без картинок

.pattern {
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
    repeating-linear-gradient(45deg, #0e1320 0 10px, #0f1526 10px 20px);
}

Производительность и доступность

• Не используйте огромные фоновые изображения для критичного LCP-контента. Если это главный визуал страницы, лучше применить <img> или <picture> — они умеют lazy и оптимальный выбор источника нативно.
• Сжимайте фоны: AVIF/WebP + разумные размеры. Для ретины используйте image-set().
• Задавайте background-color как фолбэк и для хорошего контраста текста поверх фоновых фотографий добавляйте полупрозрачные градиенты-оверлеи.
• Не злоупотребляйте background-attachment: fixed на мобильных — возможны артефакты и высокая стоимость перерисовки.

Частые ошибки и как их избежать

• Случайный сброс свойств через background. Решение: меняйте только нужные «длинные» свойства.
• Неправильный фокус на изображении при cover. Решение: регулируйте background-position по оси X/Y (например, 80% center).
• Проблемы с контрастом поверх фото. Решение: градиент-подложка поверх изображения, проверка контраста инструментами браузера.
• Использование фона для контента. Если картинка важна семантически — это не background, а <img alt="...">.

Куда двигаться дальше

Отточить практику и собрать собственный набор UI-паттернов по фонам помогут проекты с наставником. Если хотите быстро прокачать навыки вёрстки и CSS на реальных примерах, рекомендую пройти интенсив: Прокачать вёрстку на курсе «Вёрстка сайта с нуля 2.0» — от семантики до адаптива и анимаций, с обратной связью по коду.

Итог

CSS background — это мощный инструмент для визуального оформления без лишних изображений. Зная, как работают слои, позиционирование, размеры, градиенты и сокращённая запись, вы избежите распространённых ошибок и ускорите интерфейс. Применяйте фолбэки, image-set(), аккуратно работайте с fixed и смело комбинируйте несколько слоёв для выразительных, но производительных UI.