Как поставить фон css

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

Однотонный фон для страницы или блока

Самый частый вариант — цвет фона. Его можно задать всему документу или конкретному элементу. Для страницы обычно используют селектор body, для карточки, шапки или секции — нужный блок.

Пример:

body { background-color: #f5f5f5; }
.card { background-color: white; }

Если нужен прозрачный фон, значение задают как transparent. Это полезно, когда блок должен показывать фон родителя. Проверить результат просто: измените цвет на заметно контрастный и убедитесь, что он применился именно к тому элементу, который вы выбрали.

Фон-изображение и его поведение

Когда требуется картинка, background-image подключает изображение, а остальные свойства управляют тем, как оно будет отображаться. Здесь важно не ограничиваться только URL, иначе фон может повторяться или обрезаться неожиданно.

Базовая запись выглядит так:

.hero {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Для справки: если вы спрашиваете, как поставить фон css на весь экран, обычно добавляют min-height: 100vh и ставят background-size: cover. Тогда изображение заполнит область, а лишняя часть обрежется без искажений. Если наоборот нужна вся картинка целиком, используют contain, но тогда могут появиться пустые поля.

• no-repeat — не повторять изображение плиткой.
• center — выровнять по центру.
• cover — заполнить блок полностью.
• contain — показать картинку целиком.

Короткая запись через background

Свойство background удобно, когда нужно задать несколько параметров сразу. Например, цвет вместе с изображением или градиент вместе с позиционированием. Но порядок значений имеет значение, а лишняя краткость иногда мешает читать код.

Пример:

.banner {
  background: #222 url('noise.png') no-repeat center / cover;
}

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

Градиент вместо картинки

Иногда фон нужен без файлов вообще. В этом случае можно использовать linear-gradient или radial-gradient. Это удобно для кнопок, шапок и декоративных блоков, где важен плавный переход цвета.

Пример:

.promo {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

Градиент можно сочетать с изображением, но тогда следите за слоями: первым указывают верхний слой, потом следующий. Если результат не такой, как ожидалось, проверьте, не перекрывает ли один фон другой и задана ли высота блоку.

Как быстро проверить, что всё работает

После того как вы разобрались, как поставить фон css, проверьте три вещи: к тому ли селектору применено правило, не перебивается ли оно более специфичным стилем и есть ли у элемента размеры. Без ширины и высоты фон может быть почти незаметен.

1. Откройте элемент в инспекторе браузера.
2. Посмотрите, отображается ли нужное свойство в списке стилей.
3. Временно задайте яркий цвет, чтобы увидеть область.
4. Если нужен фон-картинка, проверьте путь в url и кавычки.

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