Слайд 2BACKGROUND-COLOR
transparent
Устанавливает прозрачный фон.
![BACKGROUND-COLOR transparent Устанавливает прозрачный фон.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-1.jpg)
Слайд 3BACKGROUND-IMAGE
background-image: url(путь к файлу) | none
Устанавливает фоновое изображение для элемента. Если одновременно
![BACKGROUND-IMAGE background-image: url(путь к файлу) | none Устанавливает фоновое изображение для элемента.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-2.jpg)
для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Слайд 4BACKGROUND-ATTACHMENT
устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
Значения
fixed
Делает фоновое изображение
![BACKGROUND-ATTACHMENT устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Значения](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-3.jpg)
элемента неподвижным.
scroll
Позволяет перемещаться фону вместе с содержимым.
Слайд 5BACKGROUND-POSITION
Задает начальное положение фонового изображения, установленного с помощью свойства background-image.
background-position: 100% 100%;
Возможно использование
![BACKGROUND-POSITION Задает начальное положение фонового изображения, установленного с помощью свойства background-image. background-position:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-4.jpg)
значений top, right, bottom, left, center
Слайд 6BACKGROUND-REPEAT
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства
background-repeat: no-repeat |
![BACKGROUND-REPEAT Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-repeat:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-5.jpg)
repeat | repeat-x | repeat-y
Слайд 7background-size
Размеры фонового изображения.
Задаётся в пикселях, процентах и значениями cover и contain
cover -
![background-size Размеры фонового изображения. Задаётся в пикселях, процентах и значениями cover и](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-6.jpg)
фоновое изображение растянется максимально, не изменив пропорции.
contain - фоновое изображение закроет размеры элемента, не изменив пропорции.
Слайд 8background-clip
Указывает, каким именно образом будет распределяться фон.
Возможные значения:
border-box - фон распространяется до
![background-clip Указывает, каким именно образом будет распределяться фон. Возможные значения: border-box -](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-7.jpg)
внешнего края границы
padding-box - фон распространяется до внешнего края отступа. Под границей фон не рисуется.
content-box - фон закрашивается внутри (обрезается) поля содержимого.
Слайд 9background
Краткая запись всех свойств, связанных с фоном.
background: background-color || background-image || background-position/background-size
![background Краткая запись всех свойств, связанных с фоном. background: background-color || background-image](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-8.jpg)
|| background-repeat || background-attachment || background-clip
Слайд 10ИСПОЛЬЗОВАНИЕ СПРАЙТОВ
https://spritegen.website-performance.org/
![ИСПОЛЬЗОВАНИЕ СПРАЙТОВ https://spritegen.website-performance.org/](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-9.jpg)
Слайд 11Множественные фоны
CSS позволяет задавать несколько фонов через запятую. Первый указанный фон будет
![Множественные фоны CSS позволяет задавать несколько фонов через запятую. Первый указанный фон](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/840057/slide-10.jpg)
верхним, последний - нижним.
Если нужно задать фон различными свойствами, то там значения тоже задаются через запятую.
Важный момент: фоновый цвет указывается только для последнего фона.