表示幅にあわせて画像の表示幅も変える
レスポンシブ対応などでブラウザの表示幅にバリエーションがあり、あわせて背景画像も表示するサイズを調整することが増えました。
今回は表示幅にフォーカスして、様々な幅に対応する方法を解説します。
CSS コード例
body {
background: #f7f7f7 url(./images/pic_sample.jpg) center top no-repeat;
}シンプルにbackground-positionプロパティで中央表示をした場合の表示方法です。
大きい画像を1枚用意し、中央（上揃え）表示しています。
設定自体は非常に簡単ですが、ブラウザの表示幅が画像の横幅より大きい場合には左右に余白ができてしまうというデメリットがあります。
なお、今回はbackgroundプロパティで一括指定していますが、値の「center top」はbackground-positionプロパティでも同様に指定することができます。
画像の幅を自動的に拡大する
続いて、背景画像のサイズを指定し、画像よりも表示幅が広い場合にも対応できるように設定します。
CSS コード例
body {
min-height: 650px;
background: #f7f7f7 url(./images/pic_sample.jpg) center top/cover no-repeat;
}background-sizeプロパティの「cover」は、要素の全体を覆うように画像を表示する指定です。
(coverの前の「/ (半角スラッシュ)」は、「center top」と区別するために必要です)
上記のように要素の横幅が画像の横幅より広い場合でも、画像は自動的に拡大されて表示されます。
「cover」は高さに対しても有効で、画像の表示サイズは横幅のみでなく高さについても自動的に拡大表示されます。
画像の比率を保ったまま、背景画像を縦に伸ばすか、横に伸ばすかを自動的に判別して調整されるところがポイントです。
また、今回のように背景画像を表示する要素にmin-heightプロパティを指定すると、背景画像の最低限の高さを指定することができます。
「cover」を使わずに、横幅を基準にした「100% auto」や、高さを基準にする「auto 100%」といった指定もありますが、こちらは画像の最低限の高さを指定することができなかったり、「横幅」と「高さ」のどちらを基準にするかが自動的に判定できません。
そのため、背景画像として用意する画像のサイズを選ぶのが難しく、あまりオススメできません。
また、「100% 100%」も画像の比率が無視されてしまうため実用的ではありません。
例えば、background-sizeプロパティを「100% auto」とすると、次のように表示幅が異なる場合に要素の高さにギャップが大きくなり、画面いっぱいに画像を表示することが難しくなります。
CSS コード例
body {
min-height: 650px;
background: #f7f7f7 url(./images/pic_sample.jpg) center to/100% auto no-repeat;
}
「100% auto」の指定は、このように表示幅に完全に連動して画像の幅が伸縮されるため、表示幅が狭い時と広いときのギャップが大きくなります。
特に表示幅が狭いときに、背景画像の赤さが足りず、要素の下部に空白が発生しやすいため、表示の制御が難しい方法です。