缩放没有背景附件的背景图像：修复？

Question

我正在努力找出使背景图像完全响应的最佳方法 - 到目前为止，我能想出的最佳方法是使用背景大小：封面，正如大多数人倾向于建议的那样，但与背景附件：固定，以便图像在屏幕调整大小时按比例缩小比例，否则它只保留原始比例并且根本不缩放。仅使用背景大小：封面拉伸图像以填充容器div，但不会自动缩放比例..

但是我不希望固定背景的效果在你向下滚动时隐藏图像的一部分并且更喜欢它是背景附件：滚动，但我无法让它工作和< / em>也可以缩放。

所以我的问题是：有什么方法我不知道背景图像是否会随着屏幕尺寸自动缩放而不必使用背景附件：固定来实现它？

请参阅我的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;
}