Как сделать несколько фонов в background

11.01.2021

15513

В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они будут накладываются друг на друга, первый по порядку фон будет выводится спереди, а последний сзади, поэтому только последнее свойство может содержать цвет фона.

Синтаксис позволяет указать фоновые изображения в сокращенном виде:

.bg {
	background: url(image-1.png) right bottom no-repeat, 
				url(image-2.png) left top repeat;
}

CSS

Так и в отдельных свойствах (background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size), за исключением background-color.

.bg {
	background-image: url(image-1.png), url(image-2.png);
	background-position: right bottom, left top; 
	background-repeat: no-repeat, no-repeat;
}

CSS

Пример использования multiple backgrounds

В примере используются три изображения, фон и два логотипа:

<div class="bg"></div>

HTML

К элементу с классом bg добавляются CSS-свойства:

.bg {
	width: 600px;
	height: 366px;
	background: url(/chrome.png) 78px 80px no-repeat, 
					url(/firefox.png) 314px 80px no-repeat,
					url(/bg.png) 0 0 no-repeat;
}

CSS

Результат:

Поддержка Multiple Backgrounds в браузерах

Дополнительные изображения через :before и :after

Более старый метод, который позволяет у одного элемента вывести не более трёх фоновых изображений с помощью псевдасвойств before и after:

<div class="bg"></div>

HTML

.bg {
	width: 600px;
	height: 366px;
	margin: 0 auto;
	position: relative;
	background: url(/bg.png) 0 0 no-repeat;
}
.bg:before {
	content: '';
	background: url(/chrome.png) 0 0 no-repeat;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 80px;
	left: 78px;
}
.bg:after {
	content: '';
	background: url(/firefox.png) 0 0 no-repeat;	    
	display: block;
	width: 212px;
	height: 200px;
	position: absolute;
	top: 80px;
	left: 314px;
}

CSS