0

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;
}
Rob Terrell
  • 2,398
  • 1
  • 14
  • 36
  • Does this answer your question? [CSS media queries: max-width OR max-height](https://stackoverflow.com/questions/11404744/css-media-queries-max-width-or-max-height) – maxshuty Nov 02 '21 at 00:02
  • ???? no it doesn't – Rob Terrell Nov 02 '21 at 00:28
  • How does it not? On large screens just use a media query to cap the height. Can you create a fiddle of the issue so we can help you better? – maxshuty Nov 02 '21 at 11:43

2 Answers2

0

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.

Major_Flux-
  • 140
  • 9
-1

Try this

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

This will probably work in your case

Aryan
  • 36
  • 5
  • this won't work as there is an overlay on top of the image. I provided a simple example of my usecase – Rob Terrell Nov 02 '21 at 01:00
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 02 '21 at 03:09