无背景附件缩放背景图片：固定？

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; 
}