How to Add Multiple Background Images with CSS

CSS3 allows adding multiple background images for a given element just using a comma-separated list to specify as many images as you want.

To add multiple background images, you can use the CSS background-image or background property.

Note that if you use the background-image property, the comma-separated list of the background-position and/or the background-repeat values will assign the position and repeat, respectively, for the specified multiple background images.

So, we're going to demonstrate examples with both of the mentioned properties. Let’s see how to create multiple background images, step by step!

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Create a <div> element with a class name "example".

<div class="example"></div>

Add CSS

Choose two images. They must have a small size so that you can see how the background-position and the background-repeat properties work.
Apply a style to the <div> and do not forget to give it a width and height.

.example {
  width: 100%;
  height: 500px;
  background: url("/build/images/logo-color-w3.png") no-repeat 3% 5%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700%, #002054;
}

So let’s see the outcome!

Example of adding multiple background images using the background property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 100%;
        height: 500px;
        background: url("/build/images/logo-color-w3.png") no-repeat 3% 5%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700%, #002054;
      }
    </style>
  </head>
  <body>
    <div class="example"></div>
  </body>
</html>

Try it Yourself »

Result

Example of adding multiple background images using the background-image property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 70%;
        background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom, rgba(255, 255, 255, 0), 40%, rgba(255, 255, 255, 1) 60%);
        background-size: 20%, 20%, 100%, 100%, 50px;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat;
        background-position: 5% 40%, 95% 60%, center bottom;
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>