CSS свойство background

Свойство background позволяет изменять фон элемента.

background-color - определяет цвет фона элемента. (было в прошлых уроках)

.block{
  background-color: #000;
}

background-image - устанавливает фоновое изображение элемента. Также можно установить градиент на фон.

.block{
  background-image:  url('img/bg.jpg'); (картинка)
  background:linear-gradient(to top, #fefcea, #f1da36); (градиент)
}

Подробнее о градиентах: http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient

Генератор градиента: https://cssgradient.io/

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

.block{
  background-image:  url('img/bg.jpg'); (картинка)
  background-position: center;
}

background-repeat - определяет, как будет повторяться фоновое изображение. Значения:

• no-repeat - устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу).
• repeat - фоновое изображение повторяется по горизонтали и вертикали.
• repeat-x - фоновый рисунок повторяется только по горизонтали.
• repeat-y - фоновый рисунок повторяется только по вертикали.
• inherit -наследует значение родителя.
• space - изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
• round - изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

.block{
  background-image:  url('img/bg.jpg'); (картинка)
  background-position: center;
  background-repeat: no-repeat;
}

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

• fixed - делает фоновое изображение элемента неподвижным.
• scroll - позволяет перемещаться фону вместе с содержимым.
• inherit - наследует значение родителя.
• local - фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

.block{
  background-image:  url('img/bg.jpg'); (картинка)
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}

background-size - масштабирует фоновое изображение согласно заданным размерам. Значения можно задавать в цифрах, где первое значение (проценты, px) определяет ширину, второе - высоту. Либо специальным значением.

.block{
  background-image: url('img/bg.jpg'); (картинка)
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: contain;
}

Все эти свойства можно записать одним коротким:

.block{
  background: url('img/bg.jpg')center / contain no-repeat local;
}