Фоны и градиенты

1. Семейство background

Фон — набор свойств: цвет, изображение, повтор, позиция, размер и прикрепление. Всё это пишут одной строкой (шорткат background:) или раздельно — тогда части легче переопределять.

.hero {
  background-color: #0f172a;
  background-image: url("sky.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* короткая запись */
.hero { background: #0f172a url("sky.jpg") no-repeat center / cover; }

2. background-size

• cover — заполнить, обрезав края (стандарт для hero);
• contain — вписать целиком, оставив поля;
• проценты и px — размеры точно по блоку;
• auto — натуральный размер изображения.

.banner { background-size: cover; }
.pattern { background-color: #f8fafc; background-image: url("grid.svg"); }
.pattern { background-size: 20px 20px; }

3. background-position

Смещение точки изображения: слова (top, right, bottom, left, center) и проценты/px. Проценты — гадкий ток: 50% 50% — центр, 0 0 — верхний левый угол.

.icon-bg { background-position: center; }
.preview { background-position: 80% 20%; }  /* правее и выше центра */

4. Многослойные фоны

Фоны перечисляются через запятую: первый слой сверху, последний — снизу. Классика — градиент-поверх изображения для читаемости текста.

.card {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
    url("photo.jpg");
  background-size: cover;
  background-position: center;
}

5. Градиенты: linear-gradient

linear-gradient(направление, цвет1, цвет2) плавно перетекает по линии. Направление: to right, to bottom right, или угол в deg. Проценты у цветов задают стоп-позиции.

.btn { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.divider { height: 3px; background: linear-gradient(90deg, #3b82f6, #22d3ee, #f59e0b); }

/* жёсткий переход двух цветов */
.hard { background: linear-gradient(90deg, #2563eb 0 50%, #fff 50% 100%); }

• to right — слева направо;
• 135deg — диагональ;
• cmyk-стопы с (color A x% , color B y%) — резкие границы.

6. radial-gradient и conic-gradient

.glow { background: radial-gradient(circle at 30% 30%, #e0f2fe, #ffffff); }
.pie { background: conic-gradient(#f87171 0 33%, #fbbf24 33% 66%, #34d399 66%); }

• radial — по кругу/эллипсу от точки;
• conic — по кругу углом (детти-боги, спидометры);
• все три — обычные значения background-image.

7. Повторяющиеся фоны

repeat повторит картинку; repeat-x/repeat-y — по одной оси; no-repeat — один раз. Для узоров — маленький тайл и repeat.

.dots { background: #fff url("dot.svg") repeat 0 0; }
.stripes { background: repeating-linear-gradient(45deg, #f1f5f9 0 12px, #fff 12px 24px); }

8. background-attachment и fixed

background-attachment: fixed держит фон при прокрутке — эффект paralаx-вставки без JS. На мобильных с ним не всё просто: полировка отключена на iOS.

.parallax { background-attachment: fixed; }
/* на мобильных лучше отключать fixed — медленно и глючно */

9. Градиентные кнопки и карточки

Мини-проект: блестящий ховер-эффект кнопки через фоновую позицию и градиент, стек для карточки из многослойных фонов.

.btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  transition: filter 0.2s, transform 0.2s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

10. Фоны и производительность

• не тяните огромные url() в CSS — грузите спрайты/спрайт-атласы;
• градиенты рисует браузер — они «бесплатны» по сети;
• для шумовых узоров — крошечные SVG-data-uri, не фото;
• cover-фон hero — preload-нужен, если критичен.

11. Чек-лист фонов

• background-color задан даже там, где есть image (запас);
• многослойность через запятую, слои осмыслены;
• cover для фото, contain для паттернов;
• fixed-фон осторожен; градиенты — не бесплатные скрины;
• правильные размеры image — безопасные веса.

Что дальше

Курс завершён.

← Вернуться к курсам