背景画像をレスポンシブWebデザインに対応させる

通常、img要素で画像を表示させる場合であれば、幅を100％に設定してあげれば画面幅に応じて縦横比を保ったまま伸縮していきます。背景画像も同じように縦横比を保ったまま表示させることができるので、マルチデバイスにも対応することができます。それでは、対応方法を見ていきましょう。

背景画像を画面サイズに合わせて100％表示させる方法

背景画像は、使用する画像の幅と高さを指定することで表示することができます。幅に関してはimg要素と同じく100％を指定すれば良いですが、高さに関してはheightプロパティではなく、paddingプロパティを使って高さを持たせることで、縦横比を保ったまま表示させることができます。例として、幅1200px、高さ700pxの画像を使って表示させる場合の設定が以下となります。

.box {
  width: 100%;
  padding-top: 58.3333333%;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
}

paddingに指定する値は％で指定します。数値の算出については、縦÷横×100で出します。

(使用する画像の高さ÷使用する画像の幅)×100

レスポンシブWebデザインでサイトを作成する中でキービジュアルなどを画面いっぱいに表示させたい場合などには、このような方法も活用できるかもしれません。

モバイルで表示させるには画像サイズが大きすぎて気になるといった場合には、メディアクエリを使ってデバイスごとに背景画像を切り替えるといった方法もあります。

@media screen and (min-width: 480px) {
  480px以上で表示させたい画像
}

@media screen and (min-width: 640px) {
  640px以上で表示させたい画像
}

以上が、背景画像をレスポンシブWebデザインに対応させる方法となります。