【CSS Modules】background省略形プロパティの使い方

backgroundプロパティは、HTML要素の背景に関する複数のスタイルを一括で設定するために使用されるプロパティです。これは、background-color（背景色）、background-image（背景画像）、background-repeat（背景画像の繰り返し方）、background-position（背景画像の位置）、background-size（背景画像のサイズ）、background-attachment（背景画像のスクロール挙動）、background-origin（背景画像の基準位置）、background-clip（背景画像の表示範囲）といった、個々の背景関連プロパティをまとめて指定できるショートハンドプロパティです。

このプロパティを使用することで、それぞれの背景プロパティを個別に記述する手間を省き、CSSコードをより簡潔に記述することができます。例えば、背景色、背景画像、その配置などを一行で指定することが可能です。値の指定順序は一部柔軟性がありますが、一般的には背景色、背景画像、繰り返し、位置といった順序で記述されます。指定されなかった値は、それぞれの個別のプロパティの初期値が適用されます。

また、複数の背景画像をカンマ区切りで指定することで、要素に複数の背景を重ねて表示することも可能です。この場合、最初に記述された背景が最も前面に表示され、最後に記述された背景が最も背面（要素自体）に配置されます。backgroundプロパティは、Webページの見た目を豊かにする上で非常に汎用性が高く、効率的なスタイル指定を可能にします。

Copy
1background: #ffffff url('image.jpg') no-repeat center fixed;

引数なし

引数はありません

戻り値なし

戻り値はありません