How to put an <img> behind a background-image

Question

I'm trying to create something like the image below. The upper and lower images are 2 background images. The middle photo is an <img> . The problem is that I can't seem to find out how to put the <img> behind the background images. I tried z-index but this doesn't seem to work. My code goes like this:

 /*first bg image*/ .detail-act { display: flex; flex-direction: column; align-items: center; background-image: url(./assets/img/bg-beige-sm-detail_1.svg); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; z-index: 99; padding-bottom: 3rem; } /* the <img> */ .detail-omslagfoto { z-index: -99; } /*second bg image*/ .volgende-voorstelling { background-image: url(./assets/img/bg-next-up-sm.svg); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; padding: 4rem 0; margin-top: -10rem; z-index: 99; } 

 <article class="detail-act">some content</article> <img class="detail-omslagfoto" src="..."> <article class="volgende voorstelling">some content</article> 

Answer 1

You would need to add position:relative property to the .detail-omslagfoto class.

.detail-omslagfoto {
     z-index: -99;
     position: relative;
 }