無背景附件縮放背景圖片：固定？

Question

我試圖弄清楚製作背景圖像的最佳方法 - 完全響應 - 到目前爲止，我可以找出的最佳方法是使用背景大小：封面，因爲大多數人往往會建議，但與背景-attachment：固定的，以便圖像在屏幕大小調整時按比例縮小，否則它會保留原來的比例並且不會縮放。使用只是背景大小：覆蓋拉伸圖像以填充容器div，但不會自動縮放比例。

但是，我不希望在向下滾動時隱藏圖像部分的固定背景效果並希望它是後臺附件：滾動，但我不能得到那個工作和也使它擴展。

所以我的問題是：有什麼辦法我不知道有背景圖像自動縮放與屏幕大小，而不必使用background-attachment：fixed來實現它？

請參閱我的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; 
}