Как поставить <img>за фоновое изображение

Question

Я пытаюсь создать что-то похожее на изображение ниже.Верхнее и нижнее изображения являются 2 фоновыми изображениями.Средняя фотография - <img>.Проблема в том, что я не могу понять, как поставить <img> за фоновые изображения.Я попытался z-index, но это не похоже на работу.Мой код выглядит так:

/*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

Вам необходимо добавить свойство position:relative в класс .detail-omslagfoto.

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