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