WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
SPONSORED LINKS
Advertisements

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:

  • <!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:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.