How to Use Multiple Background Images with CSS

In this tutorial, you’ll learn how to use multiple background images or colors for a given element with CSS. To do so, we’ll use the CSS comma-delimited list to specify backgrounds as many as you like. Similarly, with the help of background-image property, We can easily define more than one background image on the same div element.

Similar we can do with background color by using the CSS gradients to accomplish it. Let’s have a look at the example of adding multiple photos as background.

background-image:url(photo1.jpg), url(photo2.jpg), url(photo3.jpg)

The multiple backgrounds is really a cool feature of CSS3. Using CSS3, you can easily apply multiple backgrounds to div or other HTML elements. The syntax is super easy, all you have a comma to separate them.

Not only this, but You can also define a different position for each background and make them repeat or no-repeat.

For example, if you have two different images, you can be aligned first on to the bottom and right and make the second one aligned to the top left corner.

CSS3 Background Properties:

The background element provides us different CSS properties. These properties allow us to arrange the image size and display it in a better way. Let’s have a look at all of its properties.

background, 
background-attachment, 
background-clip, 
background-image, 
background-origin, 
background-position, 
background-repeat, 
background-size,

HTML Structure for Multiple Background Images

Here is a simple HTML, you can see we just used one main container div and then a child div with class multipleBG and it will hold different background images.

<div class="container">
   <div class="multipleBG"></div>
</div>

Using Background Images

Let’s have a look at an example here. You can see, We have defined each background by adding a comma. Next, you can notice that the background-repeat also define a different value for each photo. Similar goes with background-position property.

.multipleBg {
    background-image: url(photo1.jpg), url(photo2.jpg), url(photo3.jpg);
    background-position: center bottom, left top,right center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 250px;
}

Using Background Color

The container is just set width 100%, Of course, you can set its width different as per your need. Next, We just added gradient background color and here is how the code will look like.

.container {
  width: 100%;
  /*or 900px for example */
  overflow-x: hidden;
}
.multipleBG {
  width: 320px;
  height: 285px;
  background-color: #a8e9ff;
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#a8e9ff, endColorstr=#052afc);
  background-image: -moz-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -webkit-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -o-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -ms-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #a8e9ff), color-stop(0%, #052afc), color-stop(12%, #485e69), color-stop(1%, #ff8d00));
}

Finally, You must remember that the use of multiple background images in CSS is totally radical. You need to implement the fallback for older browsers that don’t support it. So, be careful with the browser’s supports. The best way to handle is Modernizr.