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

В 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

Пример

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

bg.png
Фон
chrome.png
Логотип Google Chrome
firefox.png
Логотип Mozilla Firefox
<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

Результат:

11.01.2021

Комментарии

, чтобы добавить комментарий.

Другие публикации

В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
1722
0
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
21569
+2
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
10774
+13
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
11847
+2
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
10997
+2
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
9533
+2