【CSS】background

backgroundについて

CSSの background プロパティは、要素の背景を指定するためのプロパティです。背景は色、画像、またはそれらの組み合わせで指定できます。

以下に、background プロパティで指定できる値とその説明を示します。

background-color: 要素の背景色を指定します
background-image: 要素の背景に表示する画像のパスを指定します
background-repeat: 背景画像の繰り返し方法を指定します（repeat, repeat-x, repeat-y, no-repeat）
background-position: 背景画像の表示位置を指定します
background-size: 背景画像のサイズを指定します
background-origin: 背景の原点を指定します
background-clip: 背景をどの領域まで表示するかを指定します
background-attachment: 背景画像のスクロール方法を指定します（scroll, fixed, local）
background-blend-mode: 複数の背景レイヤーのブレンドモードを指定します

これらの値を組み合わせて、要素の背景を目的に合わせて設定することができます。

background-imageについて

background-image プロパティは、要素の背景に画像を追加するために使用されます。

使い方: 要素に背景画像を追加するには、その要素に background-image プロパティを使用します。このプロパティには、url() 関数で囲んだ画像のファイルパスやURLを指定します。

.element {
  background-image: url('path/to/image.jpg');
}

画像の指定: url() 関数内には、表示したい画像のパスを指定します。このパスは、ウェブページ上の画像ファイルへの相対パスまたはインターネット上のURLでも構いません。ローカルの画像を使用する場合は、ファイルの相対パスを指定します。

.element {
  background-image: url('images/background.jpg');
}

画像の表示方法のカスタマイズ: 画像の表示方法をカスタマイズするには、他の background プロパティと組み合わせて使用します。たとえば、background-repeat プロパティを使用して画像の繰り返し表示の設定を変更したり、background-size プロパティを使用して画像のサイズを調整したりできます。

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat; /* 画像を繰り返し表示しない */
  background-size: cover; /* 画像を要素全体に広げる */
}

以下のこの1行のコードように記述することで、以下のプロパティの設定と同等の指定することができます。

• background-image: 背景画像のパス
• background-position: 背景画像の位置[上下、左右両方とも中央を指定】 (center center)
• background-size: 背景画像のサイズ (cover)
• background-repeat: 背景画像のリピート方法 (no-repeat)

.element {
  background: url('path/to/image.jpg') center center/cover no-repeat;
}