【CSS Modules】background-sizeプロパティの使い方
background-sizeプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
background-sizeプロパティは、要素に設定された背景画像のサイズを調整するプロパティです。このプロパティを使用することで、画像を元のサイズのまま表示するだけでなく、特定のサイズに拡大・縮小したり、要素の領域に合わせて表示したりすることが可能になります。
指定できる値にはいくつかの種類があります。まず、「auto」は、背景画像の本来のサイズを維持して表示します。また、「100px 50px」のように具体的な幅と高さを数値（ピクセル、emなど）やパーセンテージで指定することも可能です。この際、高さの指定を省略した場合は、幅に合わせて画像の縦横比を保ちながら自動的に調整されます。
特に頻繁に使用されるのは、「cover」と「contain」です。「cover」は、背景画像が要素のコンテンツ領域全体を覆うように拡大・縮小し、画像の縦横比は維持されます。そのため、画像の一部が要素の端からはみ出すことがあります。「contain」は、背景画像が要素のコンテンツ領域内に収まるように拡大・縮小し、画像の縦横比は維持されます。この場合、画像と要素の縦横比が異なる場合、背景に余白が生じることがあります。
複数の背景画像が設定されている場合、それぞれの画像に対してカンマで区切ってbackground-sizeの値を指定することができます。このプロパティは、background-imageプロパティで指定された画像に対して適用されます。
公式リファレンス: background-size
構文(syntax)
1background-size: 100% auto;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません