Масштабирование фоновых изображений без привязки к фону: исправлено?

Question

Я пытаюсь найти лучший способ сделать фоновое изображение полностью отзывчивым - до сих пор лучшим способом, который я могу выяснить, является использование фонового размера: обложка, поскольку большинство людей склонны предлагать, но с background -attachment: фиксировано так, что изображение уменьшает его пропорции по мере изменения размера экрана, в противном случае он просто сохраняет свои первоначальные пропорции и вообще не масштабируется. Используя только размер фона: обложка растягивает изображение, чтобы заполнить контейнер div, но не будет автоматически масштабировать пропорции.

Однако я не хочу, чтобы эффект фиксированного фона скрывал часть изображения при прокрутке вниз и предпочел бы, чтобы это было привязкой к фону: прокрутка, но я не могу заставить это работать и сделать его масштабируемым.

Так что мой вопрос: есть ли какой-либо способ, которым я не знаю, чтобы фоновые изображения автоматически масштабировались с размером экрана без необходимости использовать привязку к фону: исправлено для его достижения?

Пожалуйста, смотрите мой JSFiddle за то, что у меня есть на данный момент: https://jsfiddle.net/uhoL5d5w/2/

(да и я также знаю, я буду нуждаться в использовании медиа-запросов в какой-то момент, чтобы служить оптимизированные изображения для различных размеры экрана)

Мой текущий код выглядит следующим образом:

<header> 
    <div class="launch-bg"> 
     <nav class="menu"> 
     </nav> 
    </div> 
</header> 

<div class="page-wrapper"> 

</div> 


<div class="push"></div> 

<!-- Footer --> 

<div class="footer"></div> 


html, 
body { 
    @include box-sizing(border-box); 
    height: 100%; 
} 

div, 
body { 
    margin: 0; 
    padding: 0; 
} 

body { 
    display: block; 
    background-color: #000000; 
} 

.page-wrapper { 
    margin: 0 auto -900; 
    min-height: 100%; 
    height: auto; 
} 


* { 
    margin: 0; 
    padding: 0; 
} 


header { 
    display: block; 
    width: 100%; 
    height: 1200px; 
} 

    .launch-bg { 
    height: 1200px; 
    background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover; 
    } 

.footer { 
    height: 900px; 
    padding: 6% 0; 
    color: $white; 
    background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover; 
} 

Answer 1

Вот простой пример, я думаю, что вы просите, просто обрезаны все это для ясности:

header { 
    display: block; 
    width: 100%; 
    height: 1200px; 
    background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center; 
    background-size: cover; 
}