background-imageでレスポンシブに対応した可変背景の作り方

Webサイトのトップでは、以下のようなキービジュアルが設定されていることがよくあります。

こちら、background-imageを用いて、ウィンドウサイズを変更しても縦横比を維持したまま可変する背景画像の作り方を紹介します。

以下、記事に入ります。

background-imageを用いた可変背景の作り方

先ほどお見せしたように、完成系は以下のようになります。

ヘッダーは以前の記事で紹介した「Flexboxを用いたよくあるヘッダーの作り方(IE11対応)」をそのまま使用しています。

こちらの背景が、ウィンドウを大きくしても小さくしても縦横比が変わらないようにします。

まず、HTMLは以下のようになります。

CSSで背景を設定するので、divの中身は不要です。

CSSは以下のようになります。

以下、コードについて解説。

background

background-imageで背景画像を指定します。

background-sizeは必ずcoverを指定してください。

coverがないと、背景が画像サイズ以上に大きくなった時リピートしてしまいます。（no-repeatをつけると普通に途切れる）

padding-top

縦横比を保持した可変背景を作る時は、padding-top(or padding-bottom)を使用します。

padding-topの値ですが、以下の計算式を使用します。

画像の縦幅 ÷ 画像の横幅 × 100 = (%)

この値を、padding-topに指定します。

今回用いる画像の情報を見てみましょう。

大きさの部分を見ると、1280×719となっています。

したがって、今回の画像の場合

719 ÷ 1280 ×100 = 56.17%

つまり、padding-top: 56.17%を指定してあげます。

実際の画像を見てみましょう。

4Kサイズ(2560)で見てみると、

無事見えますね。

iPhoneSEサイズ(320)で見ても同様です。

このように、background-size: coverとpadding-topを指定してあげれば、どんな画面サイズでも背景画像が綺麗に表示されます。

内部コンテンツの配置

こちらの背景指定ですが、ひとつ欠点があります。

それは、背景の上にコンテンツが配置出来なくなる点です。

画像のようにpadding-top（緑色の部分）が背景部分を占めてしまっているので、paddingに押し出されて画像やテキストを背景上に配置することができません。

こういう時は、position: absolute;を使用します。

試しに、以下のロゴ画像を中央に配置してみましょう。

HTMLにロゴの情報を書き足します。

ロゴのCSSを追加

position: absoluteを使うため、.mainvisualにposition: relativeを指定します。

あとは、ロゴにabsoluteを指定して上記のプロパティを指定することで上下左右中央寄せの配置が可能です。

codepen

背景画像部分は各々の画像に差し替えてご使用ください。

上記の画像にあるヘッダー部分は外しております。

まとめ

今回紹介した縦横比を保持したまま綺麗に配置する方法、サイトトップのキービジュアルなどで頻繁に使用する手法なのでぜひ覚えておいてください。