Bootstrap 5: How to get background image to 100vh on smaller screens but 50vh on large screens?-CodePudding

Learning bootstrap, I am trying to make a hero section on my website where if you are on the large screen breakpoint, the background image on the hero section will be 50% of the web page, but on smaller screens it will change to 100% of the webpage.

Here is my HTML:

<!--hero-->
       <div >
        <div >
          <h1 >I Need Help </h1>
          <button >Book Us</button>
        </div>
      </div>

And here is the CSS:

.bg-image {

width: 100%;
height: 50vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image:
linear-gradient(to bottom, rgba(118, 118, 121, 0.432), rgba(82, 76, 80, 0.73)),
url('images/example-bg.jpg');

}

I think the problem lies with me setting height:50vh, I just simply don't know what to write on the bootstrap portion where if the screen switches to small, the height becomes 100. Thank you!

CodePudding user response：

You can use media queries. In your CSS file, at whatever screen size you want you can add -

@media screen(min-height: the_height_you_want) {
    .bg-image {
        height: 50vh;
    }
}

For more details on media queries, you should see this tutorial - https://www.w3schools.com/css/css_rwd_mediaqueries.asp