How to overlay Video and iceberg image correctly with responsive scaling?

Question

I am working on a hero section where I need to:

Have a background video covering the full screen.
Overlay an iceberg image on top of the video, positioned properly at the bottom.
Ensure text is centered above both the video and the iceberg.
Make it responsive so that the iceberg and text scale properly on different screen sizes.

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.iceberg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 600px;
  height: auto;
  z-index: 2;
}

.hero-content {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 3;
  width: 80%;
}

<div class="hero-section"> <!-- Background Video --> <video class="hero-video" autoplay loop muted playsinline> <source src="https://lji-test.loyaltycloud1.com/assets/images/Aurora_video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

  <!-- Iceberg Image -->
  <img src="https://i.sstatic.net/nugUb6pP.png" class="iceberg" alt="Iceberg">

  <!-- Overlay Content -->
  <div class="hero-content">
    <h1>THESE CHALLENGES DON’T HAVE TO DEFINE YOUR LOYALTY PROGRAM.</h1>
    <p>Let’s turn the submerged into the summit with GRAVTY®.</p>
    <a href="#" class="btn">CONTACT US</a>
  </div>
</div>

Reference image:

REFERENCE IMAGE

Video reference

https://lji-test.loyaltycloud1.com/assets/images/Aurora_video.mp4

To me, it seems like your code is doing exactly what you are requesting. If you're worried about the background video not stretching fully, just do a simple CSS reset to remove margins and padding: * { box-sizing: border-box; padding: 0; margin: 0; } — Sigurd Mazanti
– Sigurd Mazanti, Commented Mar 25 at 8:54
Where exactly is the iceberg to be positioned when the video is cropped top and biotin to achieve cover? — A Haworth
– A Haworth, Commented Mar 25 at 21:57

Professor Abronsius · Accepted Answer · 2025-03-25 10:14:58Z

If you set the background-image of the hero-section rather than an inline img element you can set the z-index ( as negative or lower ) for the video to appear behind the hero-section. You can fudge around with the background-position to move the iceberg if you need as the result appears different in the snippet editor to the preview here.

body,body *{
  font-family:monospace;
}
body{
  padding:0;
  margin:0;
  height:100vh;
  width:100%;
}

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin:0;
  background-image:url("https://i.sstatic.net/nugUb6pP.png");
  background-size:100%;
  background-repeat:no-repeat;
  background-position:50% 20%;
  color:white;
}



.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;/* set the video behind hero image */
}



.hero-content {
  text-align: center;
  z-index: 3;
  width: 80%;
}

<div class="hero-section">


  <video class="hero-video" autoplay loop muted playsinline>
    <source src="https://lji-test.loyaltycloud1.com/assets/images/Aurora_video.mp4" type="video/mp4" />     </video>

  <div class="hero-content">
    <h1>THESE CHALLENGES DON’T HAVE TO DEFINE YOUR LOYALTY PROGRAM.</h1>
    <p>Let’s turn the submerged into the summit with GRAVTY®.</p>
    <a href="#" class="btn">CONTACT US</a>
  </div>
  
</div>

Collectives™ on Stack Overflow

How to overlay Video and iceberg image correctly with responsive scaling?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related