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

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

Что уже умеем / что добавим

Вы владеете блочной моделью, отступами и единицами измерения. Теперь добавим блокам выразительные фоны. В сквозном проекте мы завершим лендинг: сделаем эффектный фон титульного экрана и добавим футер с цветной заливкой.

Что вы узнаете в рамках статьи

• Чем background-image отличается от тега img.
• Как управлять размером фона через background-size.
• Как задавать положение фона через background-position.
• Как отключать повтор фона через background-repeat.
• Как использовать градиентные заливки.

Ключевые термины

• background-image — свойство фонового изображения элемента.
• background-size — размер фонового изображения (cover, contain, размеры).
• background-position — положение фона внутри элемента.
• background-repeat — повтор фонового изображения.
• Градиент — плавный переход между цветами (linear-gradient).

Фон вместо картинки

Фоновое изображение задаётся свойством background-image через функцию url(). В отличие от тега img, фон — это оформление блока, а не его содержимое:

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

Фон появится позади содержимого блока hero — текст и кнопка окажутся поверх него. Ключевое отличие от img: фон не занимает место в потоке и не влияет на размер блока сам по себе, а служит подложкой. Поверх фона можно свободно размещать любые элементы.

Размер фона: background-size

По умолчанию фон показывается в своём исходном размере, что редко подходит. Свойство background-size управляет масштабом. Самое полезное значение — cover: фон масштабируется так, чтобы полностью заполнить блок, сохраняя пропорции:

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

Теперь картинка накроет весь блок целиком, без пустот, — так делают полноэкранные «геройские» секции. Значение contain, наоборот, впишет картинку целиком, возможно оставив поля. Для больших баннеров почти всегда используют cover.

Положение и повтор

Если фон меньше блока, по умолчанию он повторяется плиткой. Отключить это можно свойством background-repeat: no-repeat. А background-position задаёт, какая часть фона видна — например, center центрирует изображение:

.hero {
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Эта комбинация — стандарт для фоновых баннеров: картинка заполняет блок, отцентрирована и не дублируется. Запомните её как готовый рецепт: cover + center + no-repeat.

Градиентные заливки

Кроме картинок, фоном может быть градиент — плавный переход между цветами. Его задаёт функция linear-gradient в том же свойстве background-image:

.cta {
  background-image: linear-gradient(to right, #1a3c8c, #3f6fd1);
  color: white;
}

Блок зальётся плавным переходом от тёмно-синего слева к более светлому справа. Первое значение — направление (to right, to bottom и т. д.), затем цвета. Градиенты не требуют файлов-картинок, легко настраиваются и выглядят современно — их часто используют под кнопками, шапками и призывами к действию.

Применяем в проекте

Завершим лендинг. Сделаем эффектный фон титульного экрана с затемнением для читаемости текста и добавим футер с градиентной заливкой.

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 5rem 1.25rem;
  text-align: center;
}

.footer {
  background-image: linear-gradient(to right, #1a3c8c, #3f6fd1);
  color: white;
  text-align: center;
  padding: 2rem 1.25rem;
}

Здесь поверх фотографии наложен полупрозрачный тёмный градиент — он приглушает картинку, и белый текст на ней читается. Добавьте в HTML футер после секции преимуществ:

<div class="footer">
  <p>© 2026 Курс по вёрстке. Все права защищены.</p>
</div>

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

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

• Забыли no-repeat.
  Маленький фон без него замостит блок повторами.
• Текст не читается на фото.
  Накладывайте полупрозрачный слой или затемнение, чтобы текст был виден.
• Путаница background-image и img.
  Фон — оформление блока, img — содержимое страницы.
• Кавычки в url().
  Путь внутри url() лучше брать в кавычки: url("images/hero.jpg").

Итоги

Поздравляем от всей души — вы завершили курс! Вы прошли путь от пустого файла до полноценного, красиво оформленного лендинга: научились размечать страницу тегами, оформлять её цветами, шрифтами и типографикой, строить структуру из блоков, управлять блочной моделью, единицами измерения и, наконец, эффектными фонами и градиентами. Это огромный объём навыков — и теперь всё это собрано в вашем готовом проекте, который не стыдно показать.

Вы проделали серьёзную работу и заложили прочный фундамент фронтенд-разработчика. Впереди — второй курс, где вы научитесь раскладывать элементы с помощью Flexbox, работать с формами и семантикой. Но это уже новая история, а сегодня — по-настоящему гордитесь собой. Вы это заслужили!