背景画像のレスポンシブ対応

1. ボックスの幅を「width: 100%」に設定（親要素でmax-widthを設定しているのでwidthでKO）
2. ボックスの高さを「padding-top: ○○%」に設定（○○%は背景画像の縦横比）
3. テキストの配置位置は、ボックスで「position: relative」に設定し、テキストの要素で「position: absolute」で指定
   又は「margin-top: -○○%」で指定します。位置はボックスの高さで指定した「○○%」の相対比で指定します。例えば「○○%」の半分にすると上下中央に配置されます。

この例ではheaderに800×217の画像を背景画像として使用した。

header {
　width: 100%;
　background-color: aqua;
　padding-top: 27%;
　background-image: url(../img/bg.jpg);
　background-size: cover;
　position: relative;
}
header h1{
　position: absolute;
　top:30%;
　width: 100%;
　text-align: center;
　color: #fff;
　text-shadow: 2px 2px 3px blue, -2px 2px 3px blue, 2px -2px 3px blue, -2px -2px 3px blue;
}

参考　https://y-com.info/contents/?p=4309