Matching background image's height to overlay

user_18982716 0
Viewed 44

I have a background image and on top of it is an overlay, I want the overlay to match the background image's height responsively, most I can manage is to match the height of the section, any ideas?

html

<section class="section">
    <div class="bg-img">
        <div class="overlay">
            <p>This is a text on the overlay</p>
        </div>
    </div>
</section>

css

.section {
  width: 100%;
  height: auto;
  min-height: auto;
}

.bg-img {
  background: url('/static/img.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 80%;

}

.overlay {
  width: 600px;
  height: 100%;
  background-color: rgb(0,0,0,0.07);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
css html
2 Answers

You can use :after pseudo element for overlay. here's an example.

.section {
  width: 100%;
  height: auto;
  min-height: auto;
}

.bg-img {
  background: url('https://placekitten.com/640/360');
  background-repeat: no-repeat;
  background-position: top center;
    background-size: cover;
    min-height: 50vh;
    position: relative;
    width: 80%;

}

.bg-img:after{
  content:"This is a text on the overlay";
   height: 100%;
  background-color: rgb(198 58 58 / 58%);
  margin-left: auto;
  margin-right: auto;
      position: absolute;
    text-align: center;
  width:100%;
}
<section class="section">
    <div class="bg-img">
      
    </div>
</section>

user_143674160

give inner div an absolute positioning and make parent div relative .

.section {
  width: 100%;
  height: auto;
  min-height: auto;
}

.bg-img {
     background: url(https://placekitten.com/640/360);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 80%;
    min-height: 50vh;
    position: relative;
    width: 80%;
    background-size: cover;

}

.overlay {
height: 100%;
    background-color: rgb(179 42 42 / 65%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;
    width: 100%;

}
<section class="section">
    <div class="bg-img">
        <div class="overlay">
            <p>This is a text on the overlay</p>
        </div>
    </div>
</section>

user_143674160
Related