When I create a new banner for my new website and the I filled with it description title and lot again, and then I give it background image and then I save it the file and then I see on the browser it's looking good but when I'm zoomed out the background of the banner reduced 50% and then I think we should give height 100vh maybe, and then a give it height 100vh to banner after that I see again on the browser it's looking good on the zoom out but when I zoom in the background of banner reduced again 50% and then I think the one way to do is we should wrap the content into a div after that I cut height 100vh from banner to banner content div which I just made it and then it's looking good and I'm very happy but I'm thinking why we should do that?

This is the code If you wanted to see it! for HTML & CSS:

HTML:

<section class="banner">
        <div class="banner-content">
          <span class="text_banner_welcome">"Hello! A Great Horse Runners</span>
          <h1 class="title_of_banner">
            GREAT RUNNERS <br />
            GLOBAL HORSE RACE <br />
            2022
          </h1>
          <p class="description_of_banner">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit,
            harum cupiditate, assumenda commodi placeat corrupti culpa natus ex
            ea nesciunt dignissimos expedita nihil sit, autem consequatur
            aliquam ipsa ipsam. Voluptate!
          </p>
          <h3 class="date_of_banner">2022.11. 33(SAT) ~ 34(SUN)</h3>
          <span class="location_of_banner"
            >@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil,
            omnis!</span
          >
        </div>
      </section>

CSS

.banner {
    padding: 8% 12%;
    background-image: url("https://theplaidhorse.s3.amazonaws.com/media/uploads/2020/08/AdobeStock_326500445-1-768x512.jpeg");
    background-size: cover;
    position: static;
    background-repeat: no-repeat;
  }

  .banner-content {
    height: 100vh;
  }

CodePudding user response：

vh is a relative length unit which means it's relative to 1% of the height of the viewport that's why we use vh to make elements that cover the full height of the screen. It is not neccessary to give the wrapped div a relative length of 100vh you can still do that on the banner class like this.

.banner {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: bisque;
}

.content {
  width: 80%;
  height: auto;
}

<section class="banner">
    <div class="content">
        <span class="text_banner_welcome">"Hello! A Great Horse Runners</span>
        <h1 class="title_of_banner">
        GREAT RUNNERS <br />
        GLOBAL HORSE RACE <br />
        2022
        </h1>

        <p class="description_of_banner">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit,
            harum cupiditate, assumenda commodi placeat corrupti culpa natus ex
            ea nesciunt dignissimos expedita nihil sit, autem consequatur
            aliquam ipsa ipsam. Voluptate!
        </p>

        <h3 class="date_of_banner">2022.11. 33(SAT) ~ 34(SUN)</h3>
        <span class="location_of_banner">
        @ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, omnis!
        </span>
        </div>
</section>

CodePudding user response：

There are many different units used in CSS such as pixels, em, rem, percentage(%), vw, vh you can learn more about them Here

For your case, vh is known as view height.

It is a relative type of unit which means it can be used to create responsive layouts or websites. This unit depends upon the viewport of the user. Hence 1vh is equal to 1% of the user's viewport.

if the screen size of the user is 100cm, then 1vh will be 1cm.

if the screen size of the user is 10cm, then 1vh will be 0.1cm.

Also, it is not necessary to use a wrapper div around the banner, using 100vh on the .banner will give you the same result

Which means, the following style would also work

.banner{
<!-- previous styling -->

    width:100%;
    height: 100vh;

}