コーススケジュール

CSS背景の略記法

コードを短縮するために、すべての背景属性を 1 つの属性で指定することもできます。それは短縮プロパティと呼ばれます。

これを書く代わりに:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

短縮属性 background を使用できます。

短縮属性を使用して、1 つの宣言で背景プロパティを設定します。

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

短縮属性を使用する場合、属性値の順序は次のとおりです。

属性値の 1 つが欠けていても、他の値がこの順序で設定されていれば問題ありません。上記の例では、background-attachment プロパティには値がないため、使用しなかったことに注意してください。

属性	説明
background	1 つの宣言ですべての背景プロパティを設定するための短縮プロパティ。
background-attachment	背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。
background-clip	は背景の描画領域を指定します。
background-color	は要素の背景色を設定します。
background-image	は要素の背景画像を設定します。
background-origin	は、背景画像を配置する場所を指定します。
background-position	背景画像の開始位置を設定します。
background-repeat	背景画像を繰り返すかどうか、またどのように繰り返すかを設定します。
background-size	は背景画像のサイズを指定します。