Несколько фонов CSS
CSS позволяет добавить более одного фонового изображения к элементу с помощью свойства background-image.
Разделяйте каждое изображение запятой. Изображения накладываются друг на друга, при этом первое изображение находится ближе всего к зрителю.
Отдельные свойства фона
В этом примере используются два фоновых изображения с отдельными свойствами: background-image, background-position и background-repeat. Первое изображение — цветок, выровненный по правому нижнему углу, а второе — повторяющаяся текстура бумаги.
Prompt
Создайте страницу с div-блоком, у которого два фоновых изображения, используя отдельные CSS-свойства: background-image, background-position и background-repeat. Первое изображение (маленький цветок, используйте "img_flwr.gif") должно быть выровнено по правому нижнему углу без повторения, а второе изображение (текстура бумаги, используйте "paper.gif") должно повторяться от верхнего левого угла. Добавьте немного текста lorem ipsum внутри div.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multiple Backgrounds - Individual Properties</title>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Сокращённое свойство background
Вы также можете использовать сокращённое свойство background, чтобы задать несколько фонов в одном объявлении. Это даёт тот же результат, что и в примере выше.
Prompt
Создайте страницу с div-блоком, у которого два фоновых изображения, используя сокращённое CSS-свойство background. Первое изображение ("img_flwr.gif") должно быть right bottom no-repeat, а второе изображение ("paper.gif") должно быть left top repeat. Добавьте немного текста lorem ipsum внутри div.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multiple Backgrounds - Shorthand</title>
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Расширенные свойства фона CSS
Вот свойства фона CSS, используемые для расширенных фонов:
background— сокращённое свойство для задания всех свойств фона в одном объявлении.background-clip— задаёт область отрисовки фона.background-image— задаёт одно или несколько фоновых изображений для элемента.background-origin— задаёт, где позиционируется фоновое изображение.background-size— задаёт размер фонового изображения.