CODEWITHSUNDEEP
htmlcssimagebackground-imagez-index
Lucas Verhoest
Lucas Verhoest

Reputation: 275

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

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>

enter image description here

Upvotes: 0

Views: 70

Answers (1)

fliptrail
fliptrail

Reputation: 46

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

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

Upvotes: 1

Related Questions