How do I use two background images on a website. One will be in front of the other - the front one slightly smaller

Question

I have one background image which has a nice funky red sparkly light design which I am using on all of the webpages, and I have a 2nd funky background I want to use on a the final page. This site is within a Wordpress template. The first red funky background is on all the pages, the final page I want to have the 2nd background image (more gold elements in it) on top of the standard background so that the first background kinda acts like a boarder and just spills to the next page break.

Can someone provide an example of this code in html and css? You can use any two images of your choice as long as both fill up most of the screen with the one on top only a little smaller.

Answer 1

solution:

div {
  width: 300px;
  height: 300px;
  background-image: url("https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-size: cover;
  position: relative;
}
div::before {
content: '';
  position: absolute;
  background-image: url("https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032");
  background-size: cover;
  top: 15%;
  left: 15%;
  bottom: 15%;
  right: 15%;
}

<div>test</div>