CSSのbackground-imageで背景画像を設定したものの、「画像が大きすぎる」「思った位置に表示されない」と困ったことはありませんか？
背景画像は、ただ指定するだけではイメージどおりに表示されないことがあります。画像の大きさや表示位置を調整するには、専用のCSSプロパティを組み合わせる必要があります。
この記事では、background-sizeとbackground-positionの基本的な使い方を解説します。
background-sizeで背景画像のサイズを調整する
background-sizeは、背景画像の表示サイズを指定するCSSプロパティです。
画像を表示領域いっぱいに広げたり、全体が収まるように縮小したりできます。まずは代表的な指定方法を確認しましょう。
coverとcontainの違い
background-sizeでよく使われる値が、coverとcontainです。
.hero {
height: 400px;
background-image: url("../images/bg.jpg");
background-size: cover;
}coverは、画像の縦横比を維持しながら、要素の背景領域全体を覆うように表示します。
一方、containは、画像全体が背景領域に収まるように表示します。
| 指定値 | 表示方法 | 特徴 |
|---|---|---|
cover | 領域全体を覆う | 画像の一部が切れる場合がある |
contain | 画像全体を収める | 背景に余白ができる場合がある |
メインビジュアルなど、背景全体に写真を広げたい場合はcoverが便利です。
画像を切らずに表示したい場合はcontainを検討しましょう。
pxや%でサイズを指定する
背景画像のサイズは、数値でも指定できます。
例えば、画像の横幅を300pxにしたい場合は次のように記述します。
.box {
background-image: url("../images/bg.png");
background-size: 300px auto;
}autoを指定すると、画像の縦横比を維持しながら高さが自動調整されます。
また、background-size: 50% auto;とすると、背景画像の幅は背景配置領域の幅に対して50%になります。
画像の表示サイズを具体的に決めたい場合は、pxや%による指定が便利です。
background-positionで背景画像の位置を調整する
背景画像の大きさを調整したら、次は表示位置を確認しましょう。
background-positionを使うと、画像を中央や上下左右に配置できます。特にcoverで画像の一部が切れる場合は、位置の調整が重要です。
centerで背景画像を中央に配置する
背景画像を中央に配置するには、centerを指定します。
.hero {
height: 400px;
background-image: url("../images/bg.jpg");
background-size: cover;
background-position: center;
}この指定では、背景画像の中央が要素の中央に揃うように配置されます。
coverと組み合わせることで、背景全体を覆いながら画像の中心を基準に表示できます。
ただし、画像の縦横比と要素の大きさによっては、上下または左右が切れることがあります。
topやbottomで表示位置を変更する
背景画像は、中央以外にも配置できます。
例えば、画像の上側を基準に表示したい場合は、次のように指定します。
.hero {
background-position: center top;
}よく使う指定には、次のようなものがあります。
| 指定値 | 配置 |
|---|---|
center | 中央 |
center top | 上中央 |
center bottom | 下中央 |
left center | 左中央 |
right center | 右中央 |
人物写真の顔が切れてしまう場合などは、center topに変更すると改善することがあります。
画像のどの部分を見せたいかを意識して位置を調整しましょう。
pxや%で細かく位置を調整する
background-positionでは、数値を使った位置指定も可能です。
.hero {
background-position: 60% 30%;
}この場合、横方向が60%、縦方向が30%の位置で画像を配置します。
パーセント指定は、背景画像と背景配置領域のそれぞれの対応する位置を揃える仕組みです。単純に画像を領域の左上から60%移動するという意味ではありません。
また、background-position: 20px 10px;のように、pxで位置を指定することもできます。
画像の構図に合わせて、適切な値を選びましょう。
【まとめ】背景画像はサイズと位置を組み合わせて調整しよう
CSSの背景画像は、background-sizeとbackground-positionを組み合わせることで、表示方法を調整できます。
background-sizeでは、画像を領域いっぱいに広げるcoverや、画像全体を収めるcontainがよく使われます。
一方、background-positionでは、中央や上下左右への配置に加え、数値による細かな位置調整も可能です。
まずは次の組み合わせから試してみましょう。
.hero {
height: 400px;
background-image: url("../images/bg.jpg");
background-size: cover;
background-position: center;
}背景画像をきれいに表示するには、サイズだけでなく位置も重要です。
画像の見せたい部分を確認しながら、少しずつ調整してみましょう。