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

Как сделать несколько фонов 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
834

Комментарии

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

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

Плавное увеличение фонового изображения
В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
2363
0
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
27539
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
13598
+18
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
19912
+2
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
13876
+2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
13956
+2