С позиционированием и раскладкой мы немного разобрались (Flexbox, Grid, адаптив). Теперь вернёмся к красоте — будем украшать фон: добавлять изображения, градиенты и управлять их расположением.

Напомню, свойство background-color (цвет фона) мы уже изучили в лекции 3. Сейчас пойдём дальше.

1. background-image — фоновое изображение

Задаёт изображение в качестве фона. Указывается путь к файлу.

.bg-image {
    background-image: url('/images/logo.svg');
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 40px;
}

2. background-repeat — повторение фона

Управляет тем, повторяется ли фоновое изображение.

Возможные значения:

• repeat — повторяется по горизонтали и вертикали (по умолчанию)
• repeat-x — только по горизонтали
• repeat-y — только по вертикали
• no-repeat — не повторяется

.repeat-x {
    background-image: url('/images/logo.svg');
    background-repeat: repeat-x;
    background-size: 30px;
}

3. background-size — размер фона

Возможные значения:

• auto — оригинальный размер (по умолчанию)
• cover — масштабирует изображение так, чтобы оно полностью покрыло элемент
• contain — масштабирует так, чтобы изображение полностью поместилось внутри элемента
• ширина высота — например, 100px 50px

.bg-cover {
    background-image: url('/images/logo.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

4. background-position — позиция фона

Задаёт начальное положение фонового изображения.

Возможные значения:

• Ключевые слова: left, center, right, top, bottom
• Пиксели: 20px 30px (сдвиг по горизонтали и вертикали)
• Проценты: 50% 50% (центр)

.bg-position {
    background-image: url('/images/logo.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 50px;
}

5. linear-gradient — линейный градиент

Плавный переход между цветами по прямой линии.

Синтаксис: linear-gradient(направление, цвет1, цвет2, ...)

Возможные направления:

• to bottom — сверху вниз (по умолчанию)
• to top — снизу вверх
• to right — слева направо
• to left — справа налево
• to top right — по диагонали (вверх и вправо)
• 45deg — под углом 45 градусов
• 90deg — под углом 90 градусов (то же, что to right)

Пример 1: сверху вниз

.gradient-down {
    background: linear-gradient(to bottom, #530899, #14b8a6);
}

Пример 2: слева направо

.gradient-right {
    background: linear-gradient(to right, #530899, #14b8a6);
}

Пример 3: три цвета

.gradient-three {
    background: linear-gradient(to right, #530899, #14b8a6, #ffc107);
}

Пример 4: диагональный градиент (to top right)

.gradient-diagonal {
    background: linear-gradient(to top right, #530899, #14b8a6);
}

Пример 5: под углом 45 градусов

.gradient-angle {
    background: linear-gradient(45deg, #530899, #14b8a6);
}

6. radial-gradient — радиальный градиент

Градиент, расходящийся от центра к краям (круг или эллипс).

.radial {
    background: radial-gradient(circle, #530899, #14b8a6, #ffc107);
}

7. Сокращённое свойство background

Объединяет все свойства фона в одной строке. Порядок не важен, но рекомендуется:

background: цвет изображение повторение позиция / размер

.bg-short {
    background: #f0f0f0 url('/images/logo.svg') no-repeat center / 50px;
}