背景のプロパティをまとめて指定する

background

{ background 【 バックグラウンド 】 : -color -image -repeat -position -attachment -clip -size -origin; }

backgroundプロパティは、背景関連のプロパティをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 なし
適用される要素 すべての要素
モジュール Backgrounds and Borders Module Level 3

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できますが、background-sizeプロパティの値は、backgroundpositionプロパティの値にスラッシュ(/)で続けて指定します。また、background-origin、background-clipプロパティの値は、1つ目が前者に、2つ目が後者に適用されます。1つだけの場合は、両方に適用されます。

サンプルコード

body {
  background: url(bg.png) 40%/100px gray round fixed border-box;
}

上の例で指定したbackgroundプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

body {
  background-color: gray;
  background-position: 40% 0%;
  background-size: 100px 100px;
  background-clip: border-box;
  background-origin: round;
  background-attachment: fixed;
  background-image: url(bg.png);
}

関連記事