How to apply multiple background images to an element using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS3 background property

With 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. However, only the last background can include a background-color. Check out the following example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Setting Multiple Backgrounds with CSS3</title>
  • <style type="text/css">
  •     .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:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.