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 the <span class="property">background-image</span> property only accepts the image URLs. To control positioning and repetition for each layer, you must use the separate background-position and background-repeat properties. These also accept comma-separated values that map to the images in the same order.

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!

Create HTML

Create a <div> element with a <span class="attribute">class</span> name "example".

How to create an HTML <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 <span class="property">background-position</span> and the <span class="property">background-repeat</span> properties work.
Apply a style to the <div> and do not forget to give it a width and height.

How to style an HTML element using CSS background-position and background-repeat properties?

.example {
  width: 100%;
  height: 500px;
  /* Layer 1: Logo, Layer 2: Moon/Bat, Layer 3: Background color */
  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!

In CSS, comma-separated values are applied in order: the first value corresponds to the topmost background layer, the second to the next, and so on.

Example of adding multiple background images using the background property:

An example of how to use multiple background images with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 100%;
        height: 500px;
        /* Layer 1: Logo, Layer 2: Moon/Bat, Layer 3: Background color */
        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

<div class="demo px-2.5 mt-5 mb-5"> XFI4 </div> </div> ### Example of adding multiple background images using the background-image property:

An example of how to use multiple background images using CSS background-image, background-size, background-repeat and background-position properties?

<!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%;
        /* Layer 1: Image 1, Layer 2: Image 2, Layer 3: Image 3, Layer 4: Gradient */
        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%;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
        background-position: 5% 40%, 95% 60%, center bottom, center;
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

Try it Yourself »