WEBサイトのレスポンシブ対応が当たり前になってる現在、厄介なのが画像を背景（background-image）として指定する時です。
background-size: cover;やbackground-size: contain;だけで済む場合はいいですが、そうもいかな場合もあります。
今回はpadding-topを使い、背景画像の縦横比率を維持した状態でサイズが可変するレスポンシブ対応の管理人備忘録です。
このページのコンテンツ
背景画像の縦横比率を維持してレスポンシブ対応する
<div class="test-box"></div>
高さは固定できない
背景画像を表示させるには、その要素に幅と高さが必要です。縦横比率を保って拡大・縮小させたいので高さをpxで固定させる事はできません。比率で拡大・縮小させたいので「%」で指定したいところですが「%」の場合は高さを確保することができません。
解決方法：heightではなくpadding-topで高さを確保する
本題です。高さの指定にheightも%も指定できないのでpadding-topに余白を設けて%で相対的に可変するように指定します。
.test-box {
background: url('背景画像パス') no-repeat center top;
background-size: cover;
width: 100%;
padding-top: 画像の高さ分の余白%;
}
「画像の高さ分の余白」計算式
(画像の高さ / 画像の横幅) × 100
例：画像サイズが幅850px・高さ450pxの場合 (450 / 850) x 100 = 52.9411%
上記で画像の高さ分の余白が%指定できるので、画面サイズに応じて縦横比率を維持したまま、レスポシブ対応が可能となります。
background-sizeやwidthはデザインに応じて適宜変更してください。
背景画像の上にコンテンツを配置する場合
レスポンシブ対応した背景画像の上にテキストなどを表示させたい場合がありますが、上記の方法ではpadding-topが邪魔をしてレイアウトが崩れます。
その場合は、背景画像を表示させる要素にposition: relative;を指定し、内部に表示させる（背景画像の上にのせるコンテンツ）にposition: absolute;を指定します。
<div class="test-box"> <p>テキストテキスト</p> </div>
.test-box {
background: url('背景画像パス') no-repeat center top;
background-size: cover;
width: 100%;
padding-top: 画像の高さ分の余白%;
}
.test-box p {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
}
上記の様に指定することで、背景画像の上にコンテンツを乗せつつ、縦横比を保ったレスポンシブ対応が可能となります。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
