Фоновый цвет элемента в CSS устанавливается с использованием свойства background-color.

В CSS доступны различные способы определения цветов: шестнадцатеричный код (HEX), RGB или RGBA форматы, а также использование предопределенных цветовых названий, таких как red или green.

body__main {
  background-color: #ff0000;
}

Свойство background-image

Фоновое изображение можно установить с помощью CSS-свойства background-image. Для этого используется следующий синтаксис:

body__main {
  background-image: url("адрес-картинки");    
}

Адрес изображения должен быть указан внутри функции url("..."). Адреса фоновых изображений аналогичны адресам обычных изображений. К элементу можно одновременно применить и цвет фона, и фоновое изображение. В таком случае изображение будет отображаться поверх фонового цвета.

Свойство background-repeat

По умолчанию фоновое изображение повторяется. Это особенно заметно, когда изображение меньше блока. Вы можете управлять этим поведением с помощью CSS-свойства background-repeat. У этого свойства есть четыре значения:

repeat — повторять во всех направлениях (значение по умолчанию).

repeat-x — повторять только по горизонтали.

repeat-y — повторять только по вертикали.

no-repeat — не повторять.

Свойство background-position

Свойство background-position управляет расположением фонового изображения. Оно состоит из двух значений, разделенных пробелом: x и y.

x определяет положение по горизонтали.

y определяет положение по вертикали.

В качестве значений для x можно использовать ключевые слова (left, center, right), проценты и пиксели. В качестве значений для y можно использовать ключевые слова (top, center, bottom), проценты и пиксели.

Примеры использования свойства:

background-position: 50% 50%; /* картинка будет по центру */
background-position: right bottom; /* правый нижний угол */
background-position: 50px 100px; /* отступ 50px от левого края и 100px от верхнего */
background-position: 0 100%; /* левый нижний угол */
background-position: left bottom; /* левый нижний угол */

Результаты примеров:

Картинка будет расположена по центру.

Картинка будет в правом нижнем углу.

Картинка будет с отступом 50 пикселей от левого края и 100 пикселей от верхнего.

Картинка будет в левом нижнем углу.

Картинка будет в левом нижнем углу.

Если фоновое изображение больше блока, оно будет обрезано. Вы можете управлять тем, какая часть изображения будет видна, с помощью свойства background-position.

Иногда удобно использовать относительные значения (проценты), а в других случаях — абсолютные (пиксели).

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

Свойство background-attachment

Обычно фоновое изображение прокручивается вместе с содержимым блока. Однако с помощью свойства background-attachment можно зафиксировать фон на месте, чтобы он не перемещался при прокручивании.

Значения свойства:

scroll — фон прокручивается вместе с содержимым (значение по умолчанию).

fixed — фон остается фиксированным на одном месте и не прокручивается.