仕様

background<bg-layer># , <final-bg-layer>
一括/個別一括指定プロパティ
初期値個々のプロパティ
適用対象すべての要素
継承なし
百分率個々のプロパティ
計算値個々のプロパティ
補足<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
補足<final-bg-layer> = <\'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

background プロパティは、要素の背景に関する色、画像、原点と寸法、反復方法などを単一の宣言で設定する一括指定プロパティです。
順番は任意です。(<box>が2つ存在する場合は、その順番に意味があります。)
省略された値は、それぞれの初期値が設定されます。

値を記述した処だけ設定されるのではないので、注意が必要です。
，(カンマ)区切りで、複数の背景画像が指定できます。

値の数

  1. cdvSample100 > div { height: 6em; padding: 1em; border: solid 1em transparent; outline: solid 1px; overflow: hidden scroll; }
  1. <div class="cdvSample100">
  2. <div style="">壱<br>弐<br>参<br><br><br><br><br></div></div>

例示の雛型です。style属性を書き換えて例示しています。

壱
弐
参




  1. background: url(./sample16.png) top left /auto repeat no-repeat local content-box padding-box,url(./sample32.png) top right /auto no-repeat repeat local border-box border-box #ffccff;

２組 を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
background プロパティは一括指定プロパティなので、そのカンマ区切り値の数がレイヤーの数になります。

壱
弐
参




値の組み合わせ

  1. cdvSample100 > div { height: 6em; padding: 1em; border: solid 1em transparent; outline: solid 1px; overflow: hidden scroll; }
  1. <div class="cdvSample100">
  2. <div style="">壱<br>弐<br>参<br><br><br><br><br></div></div>

例示の雛型です。style属性を書き換えて例示しています。

壱
弐
参




  1. background: url(./sample16.png) top left /2em 3em repeat no-repeat local content-box padding-box #ffccff;

全て を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
background プロパティは一括指定プロパティなので、そのカンマ区切り値の数がレイヤーの数になります。
この例示では、１組のなかの値の指定状態についての例示なので１組だけとしています。

壱
弐
参




  1. background: url(./sample16.png);

画像だけ を指定しました。他の値は全て初期値が指定された物となります。 この例示では、background: url(./sample16.png) 0% 0% /auto repeat scroll padding-box border-box transparent; と指定されたのと同じです。

壱
弐
参




  1. background: url(./sample32.png) content-box padding-box;

<box> 値２つ を指定しました。１つ目の値は background-origin プロパティの値で、２つ目の値は background-clip プロパティの値になります。

壱
弐
参




CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティを使用して設定します。
(複数の画像に対しての個別の指定は不可能です。複数の画像に対しても一括して inherit などは指定します。)

  1. cdvSample140 > div { height: 6em; padding: 1em; border: solid 1em transparent; outline: solid 1px; overflow: hidden scroll; background: url(./sample16.png) top left /2em 3em repeat no-repeat local content-box padding-box #ffccff; }
  2. cdvSample140 > div > div { height: 6em; padding: 1em; border: solid 1em transparent; outline: solid 1px; overflow: hidden scroll; }
  1. <div class="cdvSample140">
  2. <div><div style="">壱<br>弐<br>参<br><br><br><br><br></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

壱
弐
参




  1. background: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

壱
弐
参




  1. background: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background プロパティの初期値は none 0% 0% /auto repeat scroll padding-box border-box transparent です。

壱
弐
参




  1. background: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background プロパティは非継承プロパティなので初期値を設定します。

壱
弐
参