CSSで背景画像の比率を保ったままブラウザのサイズに合わせる方法

PAS-POLのサイトを模写コーディングしてた時に背景画像の比率を保ったままブラウザの幅に合わせるのに四苦八苦したのでまとめておきます。

背景画像の指定方法

背景画像は「background-image」にて指定可能です。

background-image: url(画像のurl);

1	background-image: url(画像のurl);

ただし、background-imageを指定しても要素の中に画像が格納されるわけではない(要素の高さが0)ので、画像は表示されません。

背景画像を表示するには要素の高さを指定しなければなりませんが、背景画像の高さを要素の高さに指定するとブラウザのサイズを変更した時にも高さが固定されてしまいます。

背景画像を指定した要素のpadding-top(padding-bottomでも良い)に「(画像の横幅 / 画像の縦幅) * 100」の値を%で指定すればOKです。(paddingを指定することで背景画像が表示される理屈はTaneppa!(たねっぱ!)さんにて紹介されています。)

またbackground-sizeにcoverを指定することで、画像の比率を保ったまま画像で要素を埋めてくれます。

CodePenにいくつかのパターンを記述してみたので、参考にしてみてください。(OKパータンはdiv1です)