background-size: содержать слишком много пробелов при изменении размера браузера

Question

Как устранить пробелы при изменении размера браузера, если я использую background-size:contain;?

Пробелы между изображением и текстом слишком велики при меньших размерах браузера. сайт: http://16debut.com/test.html

CSS является:

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

Вы хотите пойти полностью отзывчивым, но сохранить белые облака на дне?

Используйте два фоновых изображения для одного и того же элемента.

• Вырежьте белые нижние облака сохранить как отдельный .png изображение. Используйте в качестве первого фонового изображения.
• (опционально) Сохраните снова ваше изображение большего размера, просто без белых облаков. Используйте это изображение в качестве второго значения фонового изображения.

Сейчас в CSS:

• установить облака background-position: bottom и 100% размера ("ширины")
• Установите большее изображение в центре (50%) положение и 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(http://i.stack.imgur.com/eWFn6.png) bottom/100%, /* BOTTOM CLOUDS OVERLAY */ 
    url(http://i.stack.imgur.com/IVgpV.png) 50%/cover; /* BIG IMAGE */ 
} 

HTML

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

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

---

Кажется, что Safari является довольно глупы браузер (они даже убрали поддержку для окон с 2012 года ... Amazing). Вот jsBin example и CSS:

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