title: css - Display background full height and cover content inside
body: <p>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.</p>
  
  <p>My demo: <a href="https://codepen.io/1412108/pen/GxwQgz?editors=1100" rel="nofollow noreferrer">https://codepen.io/1412108/pen/GxwQgz?editors=1100</a></p>
  
  <p>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.</p>
  
  <p>First, I used <code>background-postion</code> with negative postion like <code>background-position: center -10vw</code>. It works, but not with all screen. I am wondering if have any solution for every screen base on something (like <code>calc</code> in css or javscript) ?</p>