css - Display background full height and cover content inside

I'm building a simple responsive landing page. I have a half-round background image (svg) and I want it cover all of content inside and display full height.

My demo: https://codepen.io/1412108/pen/GxwQgz?editors=1100

It works fine, at least in small and medium screen. The problem here is, in larger screen, it cover all content inside but it lost the background's bottom (the curve). You can resize or zoom out browser to see the issue.

First, I used background-postion with negative postion like background-position: center -10vw. It works, but not with all screen. I am wondering if have any solution for every screen base on something (like calc in css or javscript) ?

Solution

Not sure this is what you are looking for but try this:

Added a background-position: center bottom; on the svg container and some padding-bottom(change this to fit your needs).

.main {
    background-image: url("https://svgshare.com/i/68x.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 10vh;
}

.header .logo {
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
}

.header .logo img{
    width: 8em;
}

.banner {
    text-align: center;
}

.banner .content {
}

.banner img {
    max-width: 300px;
    width: 100%;
}

.banner .content p {
    font-size: 0.8em;
    color: white;
    font-family: 'PingPang';
}

.banner .content .title {
    font-size: 2em;
    color: white;
}

.footer {
    margin-top: 1em;
    padding-top: 0;
    padding-bottom: 2em;
    text-align: center;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="main">
    <div class="container">
      <div class="row header">
        <div class="logo">
          <img src="https://svgshare.com/i/69T.svg" alt="logo">
        </div>
      </div>

      <div class="row banner">
        <div class="col-md-4 content">
          <div class="title">
            ABOUT US
          </div>
          <div class="text">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.。
          </div>
        </div>
        <div class="col-md-8 img-screen">
          <img src="http://knstekcom.r.worldssl.net/wp-content/uploads/2015/09/work-culture.png" alt="">
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row footer">
        Follow me
        Something here: ....
      </div>
    </div>
  </div>
</body>

</html>

And CodePen link https://codepen.io/Cata_John/pen/wmQyRG?editors=1100