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
< ! ╌for the sample div is been created on which we would give styling as well as the two backgrounds using CSS ╌>
<h1>hii I am having two backgrounds</h1>
Now let’s jump to the styling part let’s style this <div> using style tag in head of the page
/* applying width and height to the div tag and position will be relative*/
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.
The end product will look like this: