CSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве фона может использоваться изображение, цвет или градиент.

В данной записи я буду использовать ещё 2 свойства, для указания ширины(max-width) и высоты(max-height) элемента, которые помогут увидеть изменения.

background-color – цвет фона

Как и в свойстве color который задает цвет текста, background-color может задавать цвет по названию или по специальному коду.

div{
  max-width: 200px;
  max-height: 100px;
  background-color: green;
}

div{
  max-width: 200px;
  max-height: 100px;
  background-color: #008000;
}

Стили для фонового изображения

Для фонового изображения использовал картинку размером 470 × 470

background-image – фоновое изображение

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/173325_632_canny_pic.jpg");
}

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

Есть несколько дополнительных свойств, которые преобразовывать фон.

background-repeat – повтор фоновых изображений

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

По умолчанию background-repeat имеет значение repeat

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png");
background-repeat: repeat;
}

Для того чтобы изображение не повторялось, необходимо прописать значение no-repeat.

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png");
background-repeat: no-repeat;
}

Если изображение имеет маленький размер и вам нужно сделать повтор по горизонтали, то необходимо указать значение repeat-x

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png");
background-repeat: repeat-x;
}

Если изображение имеет маленький размер и вам нужно сделать повтор по вертикали, то необходимо указать значение repeat-y

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png");
background-repeat: repeat-y;
}

background-position  – позиционирование фона

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

Для того чтобы разместить изображение по центру необходимо прописать для background-position значение center. Чтобы изображение не повторялось я пропишу background-repeat: no-repeat.

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp- 
  content/uploads/2018/12/css_3-cr-292x175.png");
  background-repeat: no-repeat;
  background-position: center;
}

background-attachment – фиксация изображения на месте

По умолчанию стоит значение scroll. Для того чтобы закрепить изображение необходимо указать значение fixed.

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp- 
  content/uploads/2018/12/css_3-cr-292x175.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

background-clip – заполнение фоном отступов и границ элемента

background-origin – Положение фонового изображения относительно его родительского блока

background-size – размер изображения

Для того чтобы растянуть фон во всю ширину, необходимо для свойства background-size задать значение cover

div{
  max-width: 100%;
  max-height: 300px;
  background-color: url("http://prog-time.ru/wp- 
  content/uploads/2018/12/css_3-cr-292x175.png");
  background-position: center;
  background-size: cover;
}

Информация была взята с сайта – https://html5book.ru