background-color: 

# или rgb?

RGB (аббревиатура английских слов red, green, blue — красный, зелёный, синий) или КЗС — способ кодирования цвета с помощью трёх цветов, которые принято называть основными.

Прозрачность при RGB. Что бы сделать прозрачность фона к основным 3 буквам добавляется “a” ---> rgba

a – прозрачность от 0.0 до 0.9, в некоторых кодах перед точкой «0» нужно убирать, это уже эксперементы)

т.е. .0 - .9

Пример:

rgba (255, 255, 255, 0.5) - полупрозрачный белый

#****** - WEB-color - представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:

две первые цифры — красный

две в середине — зелёный

две последние цифры — синий

Прозрачность при #

# имеет 6 цифр, когда мы добавляем еще 2 цифры мы задаем значение прозрачность

#45735850  от 00 до 99

#ffffff50 - полупрозрачный белый

Пикчу на фон

background-image: url(Введите адрес Изображения);

1. Позиция фона background-position:

Позиция фона , задает начальное точку фонового изображения:

Допустим выберем расположение фона как на схеме1, сверху с лева --> background-position: top left;

Сначало определяется по оси X далее по оси Y

________________________________________

_________________Схема1_____________________

Значения для позиции

top - верх

left - лево

center - центр

right - право

bottom – низ

2. Повтор фона: background-repeat:

Значения:

no-repeat  Без повторений

repeat повтор и по оси Х и по оси Y

repeat-x повтор по оси Х

repeat-y повтор по оси Y

Прокрутка или фиксация пикчи

background-attachment

Значения:

fixed Делает фоновое изображение неподвижным.

Scroll Позволяет перемещаться фону

Local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте. (слишком сложно *0*)

Масштабирование фонов

background-size
***px Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
***% ***%; Задает размер фоновой картинки в процентах от ширины или высоты элемента.
background-size: 100% 100%;
Auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
Cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Прочее:
Положение Бордюра

background-clip:
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
padding-box Фон отображается внутри границ.
border-box Фон выводится под границами.
content-box Фон отображается только внутри контента.

Положения рисунка относительно бордюра.

background-origin
Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed (фон зафиксирован).
padding-box Фон позиционируется относительно края элемента с учетом толщины границы.
border-box Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box Фон позиционируется относительно содержимого элемента.

Подробная инструкция как работать с кодом https://beon.vip/Designer/blog/77917/