CSS 背景簡略

CSS background - 簡略属性

コードを短くするために、すべての背景属性を一つの属性で指定することもできます。これを簡略属性といいます。

ではなく、以下のように書くこともできます：

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

簡略属性を使用して background：

例

背景属性を一つの声明で設定する簡略属性を使用します：

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

実際に試してみてください

簡略属性を使用する場合、属性値の順序は以下の通りです：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

属性値の一部が欠けても大丈夫です。他の値をこの順序で設定してください。また、上記の例では background-attachment 属性を使用していないため、値がありませんのでご注意ください。

すべての CSS 背景属性

属性 説明
background すべての背景属性を一つの声明で設定する簡略属性です。
background-attachment 背景画像が固定か、ページの他の部分とともにスクロールするかを設定します。
background-clip 背景の描画範囲を指定します。
background-color 要素の背景色を設定します。
background-image 要素の背景画像を設定します。
background-origin 背景画像の配置場所を指定します。
background-position 背景画像の開始位置を設定します。
background-repeat 背景画像がどのように繰り返されるかを設定します。
background-size 背景画像のサイズを指定します。