CSS background-imageプロパティは何に使うの?
CSSのbackground-imageプロパティは、要素の背景画像を設定します。
用途としては以下のようなものがあります。
- 背景画像の設定: URL値の指定で、画像を要素の背景として表示することができる。
- 複数の背景画像を設定する：複数のURL値をカンマ区切りにして指定することで複数の背景画像を設定でき、順序通りに重ねて表示されます。
- 背景画像の表示方法を制御：background-repeat プロパティ値を設定することで、背景画像の繰り返し方法（平鋪け、繰り返しなし、水平方向のみの平鋪け、垂直方向のみの平鋪けなど）を制御します。
- 背景画像の位置の制御：background-position プロパティを利用することで、背景画像の位置を要素内で正確に制御できます。
- 背景画像のサイズを制御する：背景画像のサイズは、自動調整、幅と高さの固定、アスペクト比の維持などの方法で、background-size プロパティによって指定できます。
- 背景画像のスクロール動作を制御：background-attachmentプロパティを使用して、背景画像をページスクロールに追従させるかどうかを設定して、固定背景効果を実現します。
- 背景画像のブレンドモードを設定する：background-blend-mode プロパティを設定することで、背景画像と背景色をブレンドし、特殊効果を作成できます。
- コンテンツ領域、内側の余白、境界でエレメントの背景画像のトリミングを表示するよう制御するために、background-clip プロパティを設定します。
つまり、CSS の background-image プロパティは、要素の背景画像の表示を柔軟に制御できる、機能とオプションが豊富なものです。
