【CSS】背景画像を複数枚重ねてレスポンシブに対応させる

Webページの背景画像で、一部の画像だけ形を崩さずにディスプレイサイズに対応させる方法です。

やりたかったこと

最初はこのような1枚画像を用意して、ブラウザサイズに合わせて画像を変えようとしました。 が、ディスプレイサイズに合わせて縮小させると波線形状部分の形が崩れるし、画像固定にしてしまうと手前の波線画像の一部しか見えず型崩れ（あるいは画面の８割を締める）・・・など問題が出て来たので、手前の波線形状の画像だけ、常に形を崩さず最下部に表示できるにしました。

例

ディスプレイの横幅が変わっても、波線形状だけは形を崩さず、画面下部にいるようにします。

やり方

一番奥の背景画像(desktop1.jpg)、手前の波線画像(cover1.png)をそれぞれに用意。

    body{
    background: url(./img/cover1.png),url(./img/desktop1.jpg);
    background-repeat: no-repeat,no-repeat;
    background-position: bottom,top;
    background-size: contain,cover;
    background-attachment: fixed,fixed;
    }

background-sizeを背景画像はcoverにし、隙間が生まれないように。
波線画像はcontainにすることで、常に画像の全体が見えるようにしました。