How to add two background images to one div in CSS

03 Apr 2021

With CSS you can add two or more background images to a div through the CSS background property. I will be showing you how to add multiple background pictures to a HTML element.

Adding two background images in CSS

To add the images we need to use the background-image CSS property. You will also need the URL links to the images that you will be using.

example:

.two-background-images{
	background-image: url("/public/2021/left-bottom-hero.png"), url("/public/2021/right-bottom-hero.png");
}

<div class="two-background-images">
	<p>
		This is some text that will appear ontop of the two background images found on this page.
		 You can safely ignore it but it serves the purpose of dummy text and placeholder value.
	</p>
	<p>
		This text will allow us to view the background image without having to set the heights of the.
		That will appear ontop of the two background images found on this page. You can safely ignore 
		it but it serves the purpose of dummy text and placeholder value.
	</p>
</div>

You should have your two images appearing on the div tags behind the text.

Add image screenshots here check the pictures>screenshots folder

Note that the url("") are seperated by a comma. If you want to add more background images, you can add another url("") separated by a comma.

The next thing you need to do is to set the position and size or the background images.

Set two background images css left and right(side by side)

You are going the set the positions of the images using background-position property.

   background-position: left, right;

To set the size of background images, you will use background-size property.

You might discover that the image may start duplicating itself on the background. Set background-repeat property to no-repeat to stop this behaviour.

   background-repeat: no-repeat, no-repeat;

Put two background images on top of each other using CSS

This video does a good job of explaining how to create set two background images on top of each other.

Stacking Order of Multiple Backgrounds

When adding background images on top of each other the last element will be on top, not the first.