background-size: contain too much whitespace when changing browser size

Question

How do I eliminate the whitespace when the browser size changes if I am using background-size:contain;?

The whitespace between the image and the text is way too much with smaller browser sizes. site is: http://16debut.com/test.html

CSS is:

body { 
    margin:0px 0px; 
}

#hero {
    background-clip: content-box;
    background-image: url("imgtop.png");
    background-size: contain;
    background-repeat: no-repeat; 
    position: relative;
    height: 235vh;
}

#content {
    padding: 100px 50px;
    text-align: center;
    width: 80%;
    margin: 0px auto;
}

#content h2 {
    margin: 0px 0px 30px 0px;
}

#footer {
    padding: 30px 0px;
    text-align: center;
    background: #ddd;
}

Answer 1

jsbin demo

You want to go fully responsive but keep the white clouds at the bottom?

Use two background images for the same element.

• Cut out the white bottom clouds save as separate .png image. Use as first background-image.
• (optional) Save again your bigger image, just without the white clouds. Use that image as second background image value.

Now in CSS:

• set the clouds to background-position: bottom and 100% size ("width")
• Set the bigger image to center (50%) position and cover

CSS

html, body{height:100%; margin:0;}

#hero{
  position:relative;
  height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
  background: no-repeat 
    url(https://i.sstatic.net/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
    url(https://i.sstatic.net/IVgpV.png) 50% / cover;   /* BIG IMAGE */
}

HTML

<div id="hero"></div>

<div class="other">
  <h1>Other Divs</h1>
  <p>bla bla</p>
</div>

---

Seems that Safari is a quite stupid browser (they even removed support for windows since 2012... Amazing). Here's the jsBin example and css:

#hero{
  position:relative;
  height: 900px;
  height: 100vh; 
  background: url(https://i.sstatic.net/eWFn6.png) no-repeat bottom, url(https://i.sstatic.net/IVgpV.png) 50%;
  background-size: 100%, cover;
}