Уроки HTML+CSS: Стили для фона

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

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

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

`transparent`	Значение по умолчанию. Задает прозрачный фон для элемента.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Как и в свойстве 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` – фоновое изображение

`url('URL')`	Абсолютный или относительный адрес изображения.
`none`	Значение по умолчанию, также удаляет изображение у элемента из группы элементов, для которых установлено фоновое изображение.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

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` – повтор фоновых изображений

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

`repeat`	Весь фон страницы будет заполнен фоновым рисунком. Если при этом задать `background-position`, то повтор будет осуществляться с указанной позиции. Значение по умолчанию.
`no-repeat`	Фоновое изображение не будет повторяться.
`repeat-x`	Фоновый рисунок повторяется от левого до правого края веб-страницы по верхнему краю страницы.
`repeat-y`	Фоновый рисунок повторяется от верхнего до нижнего края веб-страницы по левому краю страницы.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

По умолчанию 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` – позиционирование фона

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

`left top,` `left center,` `left bottom,` `right top,` `right center,` `right bottom,` `center top,` `center center,` `center bottom`	Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение `center`.
`px / em/ %`	Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части изображения. Процентное значение рассчитывается относительно самого изображения и относительно элемента-контейнера, в котором оно расположено. Например, при задании `background-position:50% 50%;` центр изображения совпадет с центром элемента-контейнера. Одновременно можно комбинировать значения в `px, em` и `%`.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Для того чтобы разместить изображение по центру необходимо прописать для 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`	Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.
`local`	Фоновое изображение прокручивается вместе с содержимым элемента.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

По умолчанию стоит значение 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` – заполнение фоном отступов и границ элемента

`border-box`	Фон простирается до внешнего края границы элемента. Значение по умолчанию.
`padding-box`	Фона простирается до внешнего края отступов элемента.
`content-box`	Фон окрашивает только содержимое элемента.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

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

`padding-box`	Положение элемента вычисляется относительно верхнего левого угла с внутренней стороны границы элемента. Значение по умолчанию.
`border-box`	Положение элемента вычисляется относительно верхнего левого угла с внешней стороны границы элемента.
`content-box`	Положение элемента вычисляется относительно верхнего левого угла содержимого.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

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

`auto`	Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
`px / em /cm`	Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в `em`.
`%`	Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
`cover`	Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
`contain`	Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Для того чтобы растянуть фон во всю ширину, необходимо для свойства 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