How to apply multiple background images to an element using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS3 background property
In CSS3, you can add or apply multiple backgrounds to an element. The backgrounds are placed on the top of one another like layers, where the first background you specified will be on the top whereas the last background will be in the back. Also, the last background can include a background-color.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
