<section class="position-relative zindex-1 overflow-hidden">
<!-- background -->
<picture class="position-absolute w-100 h-100 zindex-under mt-n1">
<!-- mobile -->
<source media="(orientation: portrait) and (max-width: 551px)" srcset="https://bluecoastweb.com/img/home-video-still-9-23-21.jpg" type="image/webp">
<source media="(orientation: portrait) and (max-width: 551px)" srcset="https://bluecoastweb.com/img/home-video-still-9-23-21.jpg" type="image/jpeg">
<!-- desktop -->
<source srcset="https://bluecoastweb.com/img/home-video-still-9-23-21.webp" type="image/webp">
<img class="object-cover" width="100%" height="100%" src="https://bluecoastweb.com/img/home-video-still-9-23-21.jpg" 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
External JavaScript
This Pen doesn't use any external JavaScript resources.