Фоны

CSS-свойства background-* управляют фоновым оформлением элемента: цвет, изображения, позиционирование, размер, повтор, наложение. Фон — один из самых часто используемых аспектов стилизации.

Зачем нужно

Фоны определяют визуальную основу элемента. От простого цвета кнопки до сложных композиций с несколькими изображениями, градиентами и режимами наложения — всё это свойства background.

Где используется

• Цвет фона секций, карточек, кнопок
• Фоновые изображения (hero-секции, паттерны)
• Декоративные эффекты (параллакс, оверлеи)
• Градиентные фоны
• Паттерны и текстуры

Предпосылки

• Цвета в CSS — цветовые форматы
• Что такое CSS — синтаксис

---

background-color

.box { background-color: #3498db; }
.box { background-color: rgb(52 152 219); }
.box { background-color: hsl(204 70% 53%); }
.box { background-color: transparent; } /* По умолчанию */

---

background-image

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

/* Градиент как фоновое изображение */
.gradient {
  background-image: linear-gradient(to right, #667eea, #764ba2);
}

/* Без фонового изображения */
.clean {
  background-image: none;
}

---

background-position

/* Ключевые слова */
.pos1 { background-position: center; }
.pos2 { background-position: top right; }
.pos3 { background-position: bottom left; }

/* Точные значения */
.pos4 { background-position: 50% 50%; }    /* Центр */
.pos5 { background-position: 20px 40px; }  /* От левого верхнего угла */

/* 4-значный синтаксис — смещение от указанного края */
.pos6 { background-position: right 20px bottom 30px; }

---

background-size

/* Ключевые слова */
.cover   { background-size: cover; }    /* Заполнить, обрезать лишнее */
.contain { background-size: contain; }  /* Вписать целиком */

/* Точные значения */
.exact { background-size: 200px 100px; }
.width { background-size: 50% auto; }

Значение	Поведение
cover	Масштабирует, пока не заполнит контейнер. Может обрезать.
contain	Масштабирует, пока не впишется целиком. Могут быть пустые области.
auto	Исходный размер изображения
100px 200px	Ширина и высота
50%	Процент от контейнера

---

background-repeat

.repeat    { background-repeat: repeat; }      /* По умолчанию */
.no-repeat { background-repeat: no-repeat; }   /* Не повторять */
.repeat-x  { background-repeat: repeat-x; }    /* Только по X */
.repeat-y  { background-repeat: repeat-y; }    /* Только по Y */
.space     { background-repeat: space; }        /* С равными промежутками */
.round     { background-repeat: round; }        /* Масштабировать для целого числа */

---

background-attachment

.scroll { background-attachment: scroll; } /* По умолчанию — скроллится с элементом */
.fixed  { background-attachment: fixed; }  /* Фиксирован относительно viewport */
.local  { background-attachment: local; }  /* Скроллится с содержимым элемента */

Параллакс-эффект

.parallax {
  background-image: url("mountains.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  min-height: 500px;
}

Осторожно: background-attachment: fixed создаёт проблемы производительности на мобильных и часто игнорируется iOS Safari.

---

background-clip

Определяет, до какой области распространяется фон:

.border-box  { background-clip: border-box; }  /* До границы (по умолчанию) */
.padding-box { background-clip: padding-box; }  /* До padding */
.content-box { background-clip: content-box; }  /* Только content */

/* Текст как маска для фона */
.gradient-text {
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

---

background-origin

Определяет, от какой области считается позиция фона:

.border-box  { background-origin: border-box; }
.padding-box { background-origin: padding-box; } /* По умолчанию */
.content-box { background-origin: content-box; }

---

background-blend-mode

Режим наложения фонового изображения на фоновый цвет:

.blend {
  background-color: #3498db;
  background-image: url("texture.jpg");
  background-blend-mode: multiply;
}

Режим	Эффект
normal	Без наложения
multiply	Затемнение
screen	Осветление
overlay	Контраст
darken	Тёмные пиксели
lighten	Светлые пиксели
color-dodge	Осветление (dodge)
color-burn	Затемнение (burn)
soft-light	Мягкий свет
difference	Разница
hue	Оттенок от изображения
saturation	Насыщенность от изображения
color	Цвет от изображения
luminosity	Яркость от изображения

---

Множественные фоны (Multiple Backgrounds)

CSS позволяет накладывать несколько фоновых слоёв:

.multi {
  background:
    /* Слой 1 (верхний) — полупрозрачный оверлей */
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    /* Слой 2 — основное изображение */
    url("hero.jpg") center / cover no-repeat;
}

/* Паттерн поверх градиента */
.pattern {
  background:
    url("pattern.svg") repeat,
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Отдельные свойства для нескольких фонов */
.separate {
  background-image: url("top.png"), url("bottom.png");
  background-position: top center, bottom center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 50%, 100% 50%;
}

---

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

/* background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip] */

.hero {
  background: #1a1a2e url("hero.jpg") center / cover no-repeat fixed;
}

/* Несколько слоёв */
.multi {
  background:
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)) center / cover no-repeat,
    url("bg.jpg") center / cover no-repeat;
  background-color: #333; /* Цвет указывается отдельно или в последнем слое */
}

Важно: background-color можно указать только в последнем слое shorthand.

---

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

Hero-секция с оверлеем

.hero {
  background:
    linear-gradient(
      to bottom,
      rgba(26, 26, 46, 0.7),
      rgba(26, 26, 46, 0.9)
    ),
    url("hero.jpg") center / cover no-repeat;
  color: white;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Паттерн из точек

.dots {
  background:
    radial-gradient(circle, #333 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #f5f5f5;
}

Полосатый фон

.stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.05) 20px
  );
}

---

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

1. Забыт background-size: cover для hero-изображений — фон показывается в натуральном размере

2. background shorthand сбрасывает все свойства — указание background: red сбросит background-image:

   /* ПРОБЛЕМА */
   .box {
     background-image: url("bg.jpg");
     background: red; /* Изображение пропало! */
   }
   

3. background-attachment: fixed на мобильных — не работает в iOS Safari, вызывает подёргивания

4. Нет fallback-цвета при background-image — если изображение не загрузится, фон будет transparent:

   /* ХОРОШО */
   .hero {
     background-color: #1a1a2e; /* Fallback */
     background-image: url("hero.jpg");
     background-size: cover;
   }
   

5. background-clip: text без вендорного префикса — нужен -webkit-background-clip: text для кроссбраузерности

Практика

• Создать hero-секцию с фоновым изображением, cover и центрированием
• Добавить полупрозрачный градиентный оверлей поверх фото
• Реализовать градиентный текст через background-clip: text
• Создать паттерн из точек через radial-gradient
• Применить background-blend-mode: multiply для тонирования фото

Связанные темы

• Цвета в CSS — цветовые форматы
• Градиенты — linear-gradient, radial-gradient, conic-gradient
• Box-shadow — дополнительные визуальные эффекты

Ресурсы

• MDN — background
• CSS Background Patterns
• Дока — background