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

CSS-свойства фона: background-color — цвет, background-image — картинка, background-size — размер, background-position — позиция, background-repeat — повторение, background-attachment — прикрепление. Градиенты: linear-gradient — линейный, radial-gradient — радиальный. Это ОБОИ для элемента.

Свойства фона:

background-color: #3498db; background-image: url('bg.jpg');

background-size:

• cover — заполнить весь элемент (может обрезать)
• contain — вписать целиком (может быть пустое пространство)
• 100% auto — растянуть по ширине

background-position: center top; background-repeat: no-repeat; background-attachment: fixed; /* Фон неподвижен при скролле */

Сокращение: background: #3498db url('bg.jpg') center/cover no-repeat;

Градиенты (это background-image!):

linear-gradient(angle, color1, color2): background: linear-gradient(135deg, #667eea, #764ba2);

radial-gradient(circle, color1, color2): background: radial-gradient(circle, #667eea, #764ba2);

Множественные фоны: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg') center/cover;

/* Тёмный оверлей поверх картинки */

Градиенты как border: border-image: linear-gradient(135deg, #667eea, #764ba2) 1;

Repeating gradients: background: repeating-linear-gradient( 90deg, #333 0px, #333 1px, transparent 1px, transparent 20px );

Фон — как обои для комнаты. background-color — цвет стен. background-image — фотообои. background-size — cover = растянуть на всю стену, contain = вписать целиком. Градиент — плавный переход цветов (от синего к фиолетовому).

**Самый простой:**

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4rem;
  text-align: center;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Градиентный фон для hero и белый фон для карточек.

**Простой:**

/* Фон-картинка с оверлеем */
.hero {
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url('/images/hero.jpg') center/cover no-repeat;
  min-height: 60vh;
  display: grid;
  place-items: center;
  color: white;
}

/* Повторяющийся паттерн */
.pattern {
  background:
    radial-gradient(circle, #ddd 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Кнопка с градиентом */
.btn-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  background-size: 200% 200%;
  transition: background-position 0.3s;
}

.btn-gradient:hover {
  background-position: right center;
}

Фон-картинка с оверлеем, паттерн, градиентная кнопка.

**Реальный пример:**

/* Полноценный фон */
.hero {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(102,126,234,0.3), transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(118,75,162,0.3), transparent 50%),
    linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  padding: 2rem;
}

/* Сетка с фоном */
.grid-bg {
  background:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Карточка с фоном */
.card-gradient {
  background:
    linear-gradient(135deg, hsl(var(--card-hue) 80% 95%), hsl(var(--card-hue) 80% 90%));
  border: 1px solid hsl(var(--card-hue) 80% 80%);
  border-radius: 12px;
  padding: 1.5rem;
}

/* Фиксированный фон */
.parallax-section {
  background: url('/images/bg.jpg') center/cover fixed;
  min-height: 50vh;
  display: grid;
  place-items: center;
}

Продвинутые фоны: множественные градиенты, сетка, параллакс.

**Неправильно:** Использовать background-size: cover без overflow: hidden

**Почему:** Cover может выходить за границы элемента. Если есть border-radius — картинка «вылезает».

**Правильно:** Для скруглённых углов: border-radius + overflow: hidden.

**Неправильно:** Не использовать object-fit вместо background-image

**Почему:** Для контентных изображений (<img>) используйте object-fit: cover. background-image — для декоративных.

**Правильно:** <img> + object-fit: cover — для контента. background-image — для декора и оверлеев.

**Неправильно:** Путать background-size: cover и contain

**Почему:** cover — заполнит весь элемент (может обрезать). contain — впишет целиком (может быть пустое пространство).

**Правильно:** cover — «на всю стену». contain — «вписать целиком».

• background: цвет, картинка, позиция, размер, повтор
• cover — заполнить, contain — вписать целиком
• linear-gradient() и radial-gradient() — градиенты
• Множественные фоны: оверлей поверх картинки
• Градиенты — это background-image!

Назад: Вы знаете CSS-функции (C22) — фоны и градиенты завершают ваш набор инструментов CSS.

Вперёд: Это финальный урок CSS! Теперь вы умеете создавать и оформлять статические страницы: структура (HTML) + внешний вид (CSS). Следующий этап — JavaScript (JS Core): он добавит страницам поведение и интерактивность.