Несколько фоновых изображений CSS

[Severniy]

Чтобы не создавать блок внутри блока, проще всего дописать одну строчку правил к главному элементу и, таким образом, получим нужный результат. Можно считать это лаконичным вариантам, тем более, избавить от необходимости лишний раз лезть в исходный код. Все будет сделано одними только средствами CSS.

HTML

<div class="blockimg"></div>

CSS

.blockimg{
background: url("img/img2.png"),/*самых верхний фон и дальше последовательно*/
            url("img/img3.png"),
            url("img/img1.jpg");
background-position:370px center, 120px 150px, center center;/*позиция изображений*/
background-repeat: no-repeat;/*повторение рисунка*/
background-color: #444;/*если нужен цвет фона*/
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 100px auto 15px;
box-sizing: border-box;
padding: 25px;
width:700px;
min-height: 300px;
}
/*сокращенный вариант*/
.blockimg{
background: url("img/img2.png") no-repeat 370px center,
            url("img/img3.png") no-repeat 120px 150px,
            url("img/img1.jpg") no-repeat center center;
margin: 100px auto 15px;
box-sizing: border-box;
padding: 25px;
width:700px;
min-height: 300px;
}

Пояснение: Задаем элементу фоновой рисунок, указывая путь к его местоположению. Через запятую нам дается возможность прописать еще множество бэкграундов, как это видно в коде выше. Порядок расположения их численности определяет какое изображение будет находиться поверх других. То есть, первый фон – выше всех остальных, а дальше идет последовательность по принципу обычного графического редактора.

Следом указывается дополнительные параметры через отдельные свойства: позиция, повторение, размер, если нужно, то еще цвет. Также обращаем внимания, что все параметры прописываются через запятую, в том же порядке, в каком числе находится картинка.

И последняя деталь. Весь код можно сократить, использовав лишь одно универсальное свойство background. В примере кода есть второй вариант где показано, как это делается.

Фоновой рисунок через псевдоэлемент

Также не стоит забывать про альтернативные варианты, как таковыми, являются псевдоэлементы before и after. В их применении есть положительный плюс – изображение можно заносить за край элемента, так чтоб оно не исчезало на границе, а было поверх нее. Такой прием пригодится, если нужно будет сделать что-то вроде 3Д эффекта.

HTML

<div class="blockimg"></div>

CSS

.blockimg{
background: url("img/img1.jpg") no-repeat;/*фон элемента*/
position:relative;/*область позиционирования*/
margin: 200px auto 15px;
box-sizing: border-box;
padding: 25px;
width:700px;
min-height: 300px;
}
.blockimg::before{
background: url("img/img1.png") no-repeat center center;
bottom: 0;
content: "";
height: 295px;
left: 0;
position: absolute;/*абсолютное позиционирование*/
right: 0;
top: -150px;
}

Пояснение: По сути, все очень просто. Главному элементу обычным путем задаем фон. Дальше идет ключевое свойство position: relative;, которое определяет область для перемещения другого элемента, находящегося в главном элементе и имеющем свойство position:absolute;.

Вместо другого элемента, хотя формально, он идет как отдельная область, используем псевдоэлемент. Ему задаем абсолютную позицию и позиционируем в необходимое нам место.