html - How to overlay Video and iceberg image correctly with responsive scaling? - Stack Overflow

admin管理员组

文章数量:1405392

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

1. Have a background video covering the full screen.
2. Overlay an iceberg image on top of the video, positioned properly at the bottom.
3. Ensure text is centered above both the video and the iceberg.
4. 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=".mp4" type="video/mp4"> Your browser does not support the video tag. </video>

  <!-- Iceberg Image -->
  <img src=".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>

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

1. Have a background video covering the full screen.
2. Overlay an iceberg image on top of the video, positioned properly at the bottom.
3. Ensure text is centered above both the video and the iceberg.
4. 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/assets/images/Aurora_video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

  <!-- Iceberg Image -->
  <img src="https://i.sstatic/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:

Video reference

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

• html
• css
• responsive-design

Share Improve this question Follow edited Mar 25 at 8:47 Ori Drori 194k3232 gold badges238238 silver badges229229 bronze badges asked Mar 25 at 7:29 Prasad GudipalliPrasad Gudipalli 911 silver badge 2

• 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 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 Commented Mar 25 at 21:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

本文标签： htmlHow to overlay Video and iceberg image correctly with responsive scalingStack Overflow