CSSリファレンス

backgroundの意味と使い方

「background」は背景に関する指定を一括して指定できます。基本的には必要な値を任意の順番で並べ、半角スペースで区切って指定しますが、次のような決まりがあります。
(1)background-sizeプロパティの値はbackground-positionプロパティの後に、「/」で区切って指定します。
(2)background-originプロパティとbackground-clipプロパティには、どちらも「padding-box」「border-box」「content-box」を指定できます。これらの中からbackground-originプロパティの値、background-clipプロパティの値の順番で、セットで指定します。
値を1つだけ指定した場合は、両方のプロパティに同じ値が設定されます。
省略した値については初期値が適用されます。

値の指定方法

background-imageの値

背景画像を指定します。


background-positionの値

背景画像の位置を指定します。


background-sizeの値

背景画像のサイズを指定します。


background-repeatの値

背景画像の繰り返しを指定します。


background-attachmentの値

背景画像の固定を指定します。


background-originの値

背景画像の基準の位置をしていします。


background-clipの値

背景画像を表示する範囲を指定します。


background-colorの値

背景色を指定します。


関連プロパティ

  • background-repeat:背景画像のリピートの仕方を指定する
  • background-attachment:背景画像の固定・移動を指定する
  • background-position:背景画像の表示開始位置を指定する
  • background-clip:背景を表示する範囲を指定する
  • background-origin:背景画像の基準の位置を指定する