CSSで背景画像をレスポンシブ対応させる方法！
CSSで背景画像をレスポンシブ対応させる方法についてサンプルコード付きで解説します。ここではCSSのbackground-imageを用います。あまり知られていない手法を用いるので、ぜひ見て学んでください。
背景画像をレスポンシブ対応させたい
背景画像をレスポンシブ対応させたいということがよくあります。
ここではCSSのbackground-imageプロパティを用いて背景画像をPCやスマホのサイズに合わせて拡大、縮小させる方法についてサンプルコード付きで解説します。
またあまり知られていない便利な手法も紹介します。
CSSで背景画像をレスポンシブ対応させる方法
ではCSSのbackground-imageプロパティを用いて、背景画像をレスポンシブ対応させる方法について解説します。
画面幅いっぱいに表示させる
ではまず画面幅いっぱいに表示させた上で、背景画像をレスポンシブ対応させる方法について解説します。
ではサンプルコードを用意したので確認してみましょう。
上記サンプルコードでは画面幅いっぱいで、尚且つレスポンシブ対応していることが分かります。別タブで開いて見たい方はコチラ。
サンプルコードの解説
まずbackground-imageプロパティに適当な画像を設定して、次に画面幅いっぱいに表示させるためにbackground-position: center;とします。
そしてどの画面幅に対しても画像の真ん中を中心に表示させるようにするために、background-size: cover;とします。
最後に適当な高さを設定してあげると、その高さでどの画面幅に対してもレスポンシブ対応して画像が表示されます。
余白をもたせて表示させる
余白をもたせて背景画像をレスポンシブ対応させるには、background-size: contain;を用います。
ではサンプルコードを見てみましょう。
こちらも実際に適当な画像を用意して、サンプルコードを試してください。
サンプルコードの解説
では1つ目のサンプルコードと異なる点を解説します。
まずbackground-size: contain;としています。containの値の指定は縦横比は保持しつつ、背景領域に収まるように画像を拡大・縮小させるものです。これを設定することでどの画面サイズに対しても画像全体が表示されます。
そしてbackground-size: contain;を用いる際は、background-repeat: no-repeat;も一緒に用いてください。
background-repeat: no-repeat;を設定しないと、余白の部分に何枚も画像が表示されてしまうことがあります。念のためつけておきましょう。
補足
background-size: contain;は意図しない余白を生んでしまうため、現場ではあまり使われていません。
ですのでbackground-size: contain;は参考程度に抑えておいて、ここで紹介している他の方法をまず抑えてください。
背景画像の高さをもレスポンシブ対応させる
こちらの方法はあまり知られていない手法となります。
今までの手法では高さを設定してきましたが、今回は設定しません。
なぜなら高さも画面幅に合わせて変えるためです。
では実際にサンプルコードを見てみましょう。
また適当な画像を用意して、サンプルコードをご自身の環境で試してみてください。（別タブで開きたい方はコチラ）
画面幅によって画像の高さも変化していることが分かります。
サンプルコードの解説
では1つ目のサンプルコードと異なる点を解説します。
まず高さも画像幅に応じて変化させるために、高さの設定を無くしました。
そしてここからがポイントとなるのですが、擬似要素の::beforeを用意します。その中でpadding-top: 50%;を設定します。
こうすることで、画像の高さもレスポンシブ対応されるようになります。
こちらの手法はとても便利ですので、ぜひ覚えておきましょう。
まとめ
いかがでしたでしょうか？
背景画像をレスポンシブ対応させることはよくあります。
ぜひここで紹介した方法、特に最後に紹介した手法を用いて、実際に活用してみてください。
