Свойство background-color

Цвет фона можно задать с помощью CSS-свойства background-color.

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

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

selector {
  background-color: #ff0000;
}

Свойство background-image

Фоновое изображение можно задать с помощью CSS-свойства background-image. Адрес картинки обязательно заключается внутрь url("..."). Например:

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

Элементу можно одновременно задавать и цвет фона, и фоновую картинку. В этом случае картинка будет отображаться поверх фонового цвета.

Свойство background-repeat

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

• 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 можно управлять тем, какая часть изображения будет обрезана. Для этого можно использовать относительные значения (проценты), а иногда абсолютные (пиксели). Можно использовать отрицательные значения, а также комбинировать пиксели и проценты.

Свойство background-attachment

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

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

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

Свойство background

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

background: [bc] [bi] [br] [bp] [ba];
/* Обозначения:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/

Если какой-то компонент не указан, то берется значение по умолчанию.