Hero Image with min-height: 100vh too large-CodePudding

I am using min-height: 100vh on a hero image, but I am noticing on lg-xl screens the image becomes extremely large. Is there a way to correct this or cap the height of the hero image without affecting the overlay within the image. Please note there is an overlay on top of the image so using height 100vh doesn't work My code is as follows:

<div className="bg-img"></div>

.bg-img {
min-height: 100vh;
background-image: url('https://storage.googleapis.com/youfit-assets/nologo.png');
background-size: cover;
}

CodePudding user response：

Try doing height: 100vh; instead of min-height: 100vh;. Maybe that is what is bugging you.

And then I tested it and saw that the attribute className is invalid and should be class.

CodePudding user response：

Try this

*{
  margin: 0px;
  padding: 0px;
  
 }
 body{
 min-height: 100vh;
 }
.bg-img{
 height: 100vh;
}

This will probably work in your case