⑩ Множественные фоны

Продолжим изучение темы CSS - фон. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Базовый цвет: свойство background-color
• ② Источник изображения: свойство background-image
• ③ Укладка изображений: свойство background-repeat
• ④ Фиксация изображения: свойство background-attachment
• ⑤ Позиционирование изображений: свойство background-position
• ⑥ Область рисования: свойство background-clip
• ⑦ Область расположения фона: свойство background-origin
• ⑧ Размер изображений: свойство background-size
• ⑨ Краткая запись свойств фона: свойство background

Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image. Значение none по-прежнему создает слой.

Пример

CSS

div {
width: 680px;
height: 630px;
background-image: url(https://html5book.ru/wp-content/uploads/2015/02/flower_rose.png), url(https://html5book.ru/wp-content/uploads/2015/02/love.png), url(https://html5book.ru/wp-content/uploads/2015/02/border_white.png);
background-repeat: no-repeat;
background-position: bottom right, center center, top left;
}

Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

Источник ↗