<section class="position-relative zindex-1 overflow-hidden">
	
	<!-- background -->
  <picture class="position-absolute w-100 h-100 zindex-under">
    <!-- mobile -->
    <source media="(orientation: portrait) and (max-width: 551px)" srcset="https://www.fillmurray.com/550/800" type="image/webp">
    <source media="(orientation: portrait) and (max-width: 551px)" srcset="https://www.fillmurray.com/550/800" type="image/jpeg">
    <!-- desktop -->
    <source srcset="https://www.fillmurray.com/g/1200/800" type="image/webp">
    <img class="object-cover" width="100%" height="100%" src="https://www.fillmurray.com/g/1200/800" alt="">
  </picture>
	
  <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center text-center gradient-mask">
    <h1>Behind me is a background image!</h1>
		<p>Resize me. I'm responsive and I use webp when I can.</p>
  </div>
	
</section>
.object-cover {
   -o-object-fit: cover;
   object-fit: cover;
 }
.zindex-1 {
   z-index: 1;
 }
.zindex-under {
   z-index: -1;
 }
section {
	height: 100vh;
}
.gradient-mask {
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
	color: white;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.