В CSS3 вы можете добавить или применить несколько фонов к элементу. Фоны размещаются один над другим, причем первый заданный вами фон будет наверху, а последний — сзади. Кроме того, последний фон может включать background-color.
Давайте попробуем следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Multiple Backgrounds with CSS3</title>
<style>
.box {
width: 100%;
height: 500px;
background: url("images/birds.png") no-repeat center, url("images/clouds.png") no-repeat center, url("images/sun.png") no-repeat 10% 30%, lightblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
