背景画像のサイズを要素の幅に合わせて調整する

背景画像を要素に合わせて表示する

HTML要素の背景に画像を配置するとき、画像を要素の幅に合わせたいことがあります。
このように画像の表示幅を指定するときは、background-sizeプロパティを使います。

今回は次の画像を使って、要素に合わせて表示幅を調整していきます。

background-sizeプロパティを使わず、ただ背景画像で上記の画像を設定した場合は次のような表示となります。

続いて、background-sizeプロパティで表示幅を設定していきます。

コード例

section {
	background-image: url(./images/pic_sample.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

background-sizeプロパティによって、画像の表示幅を要素の横幅に収めることができました。
1つ目の値が横幅、2つ目の値が高さです。
今回は幅のみ「100%」と指定して高さを自動にしていますが、逆に高さを合わせることもできます。

コード例

section {
	background-image: url(./images/pic_sample.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

また、このプロパティの値はbackgroundプロパティで一括指定することも可能です。
一括指定の方がコードはスッキリします。

コード例

section {
	background: url(./images/pic_sample.jpg) left top / auto 100% no-repeat;
}

前から順に画像のURL、表示位置、表示サイズ、繰り返し表示の有無を指定しています。
表示位置と表示サイズの間は「/ (半角スラッシュ)」で区切ります。