HTML & CSS

最終更新日:
公開日:

レシピ

画像

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

要素の背景画像について、要素の幅に応じて自動的に画像の幅も調整させる方法を解説します。

この記事のポイント

  • 背景画像の表示サイズを自在に設定する
  • backgroundプロパティで他プロパティと一括指定する

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

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、表示位置、表示サイズ、繰り返し表示の有無を指定しています。
表示位置と表示サイズの間は「/ (半角スラッシュ)」で区切ります。