背景画像をレスポンシブに対応させる方法

背景画像をレスポンシブ対応させるにはBootstrap4でインラインフレーム（Iframe）をレスポンシブに埋め込む方法と同じ手法をCSSで使います。

#bgResponsive{
    height: 0;
    padding-top: 75%;
    background: url('●●●') 0 0 no-repeat;
    background-size: contain;
}

#bgResponsive{

height: 0;

padding-top: 75%;

background: url('●●●') 0 0 no-repeat;

background-size: contain;

}

padding-topを　高さ÷幅　で求めます。

＜例＞　幅640px　高さ360px　→　56.25%

#bgResponsive{
    height: 0;
    padding-top: 56.25%;
    background: url('●●●') 0 0 no-repeat;
    background-size: contain;
}

#bgResponsive{

height: 0;

padding-top: 56.25%;

background: url('●●●') 0 0 no-repeat;

background-size: contain;

}