Как вставить несколько background в один div блок?

Несколько background в одном DIV блоке на CSS – это реально и просто.

Предположим есть div блок с классом:

<div class="mnogofonov"></div>

Что бы разместить в нём несколько фонов, воспользуемся CSS стилями

.mnogofonov {
width: 100%;
height: 400px;
background-image: url(/wp-content/uploads/2019/11/space-shattle-gravi.png),
url(/wp-content/uploads/2019/11/moon.png),
linear-gradient(to right, rgb(31, 35, 39), rgb(12, 48, 70));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
}

В итоге получим такую картину:

Разберёмся, как это работает. В примере у каждого свойства (background-image, background-repeat, background-position) указываются через запятую стили, которые соответствуют друг другу по очерёдности. Свойств может быть больше. На этом всё 🙂

Пишите комменты, делитесь статьёй в соц. сетях…