html - background-attachment を使用しない背景画像のスケーリング: 修正済み?

Question

背景画像を完全にレスポンシブにするための最良の方法を見つけようとしています-これまでのところ、私が理解できる最善の方法は、ほとんどの人が提案する傾向があるように、background-size: cover を使用することですが、 background-attachment: fixedを使用します。画面のサイズが変更されると、画像の縦横比が縮小されます。それ以外の場合は、元の縦横比が保持され、まったく拡大縮小されません。background-size のみを使用: cover はイメージを引き伸ばしてコンテナー div を埋めますが、比率は自動的にスケーリングしません。

ただし、下にスクロールするときに画像の一部を非表示にする固定背景の効果は望んでおらず、それを background-attachment: scroll にすることを好みますが、それを機能させて拡大縮小することはできません。

だから私の質問は: 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;
}