how to add multiple backgrounds using css?

I have used before and after pseudo selectors to add two background images, Let’s start with HTML and create a <div> tag with me
HTML:
< ! ╌for the sample div is been created on which we would give styling as well as the two backgrounds using CSS ╌>
<div>
<h1>hii I am having two backgrounds</h1>
</div>

Now let’s jump to the styling part let’s style this <div> using style tag in head of the page
CSS:

<style>
 /* applying width and height to the div tag and position will be relative*/
div{
width: 100%;
height: 500px;
position: relative;
}
</style>

Now let’s have two backgrounds for that here, I have used before and after property to give background to the div on the left as well as on the right and the width is set to 50% of both the selectors cause we want two backgrounds with the same width.

the position is set to absolute and the top, left and right properties are set zero respectively to be in corners.
z-index of both the selectors are set to -1 so that they would be on the same level.

<style>
div::before{
content: "";
position: absolute;
background-color: red;
width: 50%
height: 500px;
top: 0px;
left: 0px;
z-index: -1;
}
div::after{
content: "";
position: absolute;
background-color: pink;
width: 50%
height: 500px;
top: 0px;
right: 0px;
z-index: -1;
}
</style>

The end product will look like this:

 

 

2 thoughts on “how to add multiple backgrounds using css?”

  1. Hi, can you provide the code snippet in the copy and paste format. I have seen many bloggers give the code in copy and pasteable form, and there must be a wordpress plugin for that.

Leave a Comment

Your email address will not be published.

Scroll to Top