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

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

backgroundで背景設定を作ると思わぬ所でつまづいてしまったので、その解決方法を記事にしてみました。なお今回はcreative memomemoさんの記事を参考にさせて頂いております。

background指定した画像を拡大縮小する方法

背景画像を可変で表示したいだけなのですが、これが曲者でbackground(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されない欠点があります。ならば指定すればいいのですが高さを設定をするとウィンドウサイズの拡大縮小時に高さ分の余白残りや画像切れをおこします。

background指定した画像を拡大縮小する方法

高さ設定した場合、画像のように高さの値はそのままなので余白が残ってしまいます。

height:0;でpadding-topで高さ(余白)を設定

高さが与えられないならばどうしたものかと色々探した結果、paddingでの余白空けという発想に辿り着きました。ポイントはheight:0;にしておく事です。また、拡大縮小することが前提なのでpadding-top(もしくはpadding-bottom)は%指定で設定します。%の計算方法は以下の通りです。

高さ÷横幅×100=padding-topの%(パーセント)

その場合、今回の画像サイズの値を当てはめると

例)1571(px)÷2356(px)×100=66.68%・・・

だいたい66.9%ぐらいになりました。厳密に計算してもデバイスによって多少ズレが生じるのが難点ですが、わざわざCSSの記述を増やすよりはコレひとつで賄えるのでとても便利でした。