This article will present you with the very basics of CSS – how to add multiple background images to one element. During that process we will take a peek at three other background properties that can be closely connected to the multilayering of images in CSS – in our case background-position, background-size and background-repeat. We’ve already written about background property in detail and you can find more information about it in A complete guide to CSS background property with values explained through examples.
CSS background-image property and multiple background images
Multiple background images are actually images layered atop one another. So, the first background image that you list is on the top – the closest to the viewer, and the last background listed is the one that is positioned in the very back. So, you can apply multiple backgrounds to elements and you can include as many background images as you want. The syntax would look something like this:
.my-multiple-background {
background: background-image1, background-image2, ..., background-imageN;
}In addition, you can specify individual properties for each background through a shorthand background property. You can specify the following background properties as a list – one per background:
- background,
- background-attachment,
- background-clip,
- background-image,
- background-origin,
- background-position,
- background-size,
- background-repeat.
I am sure you’ve noticed there isn’t background-color in the list. This is because the last background is the only one that can have a background-color property listed.
Commas to separate different background images as well as other values in background properties
As already said, CSS allows you to add multiple background images for an element. This is done through the background-image property, and you need to separate these different background images with commas. As already said – images are layered – they are atop one another – and the first image listed is closest to the viewer, the last is the farthest.
One example of multiple background images, two examples of how to declare them
We will turn the theory into practice here – we will take three images and we’ll see how we can declare one multiple background image in two ways. In the first example, we will apply the long way, stating each background property independently, and in the second, we will apply a shorthand background property.
Let’s take a look at the CSS code where we state each background property independently:
.my-multiple-background {
height: 100vh;
background-image: img1.jpg, img2.jpg, img3.jpg;
background-position: center, top right, bottom right;
background-size: auto, cover, cover;
background-repeat: no-repeat;
}
So, the following example has three background images:
- The first image is a img1 (background-image property), we aligned it in the center (background-position property), <auto> value for background-size property, which tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio, and we didn’t want the image to repeat (background-repeat property).
- The second image is img2 (background-image property), we aligned it to the right top corner (background-position property), specified the <cover> value for background-size property, which tells the browser that the image should always cover the entire container, even if it stretches or cuts it off from one of its edges, and again we didn’t want it to repeat, so <no-repeat> value for the background-repeat property.
- The third image is img3 (background-image property), we aligned it to the right bottom corner (background-position property), specified the <cover> value for background-size property, which tells the browser that the image should always cover the entire container, even if it stretches or cuts it off from one of its edges, and again we didn’t want it to repeat, so <no-repeat> value for the background-repeat property.
Notice how background-repeat property has just one value? This is because this one value is the same for all background images.
And notice how we had to specify <cover> value for for background-size property for the second and third image even though they are the same? If we said, for example, img1 is auto, img2 is cover, and said nothing for the img3, the browser would have read that img3 is auto too – it would start reading values from the beginning.
Now, let’s take a look at how we can use the background shorthand property, which will give us the same result as the code above:
.my-multiple-background {
background: url(img1.jpg) center auto no-repeat, url(img2.jpg) right top cover no-repeat, url(img3.jpg) right top cover no-repeat;
}As you can notice, all values for the first background are declared before the comma, and after the comma, we have listed all values that belong to the properties for the second background image, and after the second comma the values that belong to the properties for the third background image. In this example, where we show the shorthand background property, the situation with a <no-repeat> value is a bit different. We have to repeat the <no-repeat> value every time, even though the value repeats for all background images. Even more, if we would have stated it only once, the browser would assume the value for the second and third background-repeat property is the default, which is <repeat>, so we would have a different final result.