CSS 背景モジュール レベル4

1. はじめに

要素がCSSボックスモデル [CSS-BOX-3]に従ってレンダリングされる場合、 各要素は全く表示されない、または1つ以上の長方形のボックスとしてフォーマットされます。 各ボックスは長方形の内容領域をもち、 内容のまわりにパディングの帯があり、 パディングのまわりに境界線があり、 境界線の外にマージンがあります。 （マージンは実際には負になることもありますが、マージンは背景や境界線に影響しません。）

このモジュールのプロパティは、内容・ パディング・ 境界線の各領域の背景を扱います。

もし要素が複数のボックス断片に分割される場合、 box-decoration-breakが 境界線や背景をさまざまな断片間でどのように分割するか定義します。 （要素は行末・列の終わり・ページの終わりなどで分割され、次の行・列・ページで続けられる場合、複数の断片が生じます。）

背景・境界線・シャドウの相対的な重なり順序はこのモジュールで定義されます。 これらのレイヤーが他の描画コンテンツとどのように相互作用するかは、 [CSS2]の付録E「積層コンテキストの詳細説明」を参照してください。

1.1. モジュール間の連携

この仕様は、CSS Backgrounds and Borders Module Level 3 [CSS3BG] の背景関連部分を拡張します。

追加されたbackground-repeat-*や`background-position-*'ロングハンド、 背景レイヤー（色を除く）を定義可能にする新しい background-tbdプロパティ、 そしてbackground-clip に2つの新しい値を追加します。

このモジュールの全プロパティは ::first-letter および ::first-line 疑似要素にも適用されます。

1.2. 値の定義

この仕様はCSSプロパティ定義規約 [CSS2]および 値定義構文 [CSS-VALUES-3] に基づいています。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることでそれらの値型の定義が拡張される場合があります。 例えば、CSS Imagesと組み合わせると、 CSSグラデーションを background-image や border-image の値として使うことができます。 [CSS-IMAGES-3]

プロパティ固有の値に加えて、本仕様で定義されるすべてのプロパティは CSS全体のキーワード もプロパティ値として受け入れます。 可読性のため、これらは明示的に繰り返していません。

2. 背景の定義

各ボックスには背景レイヤーがあり、完全に透明（デフォルト）、または色や画像で満たされることができます。 背景プロパティは、用いる色（background-color）や 画像（background-image）、 それらのサイズ、位置、タイル化方法などを指定します。

背景プロパティは継承されませんが、親ボックスの背景が初期値 transparent のためデフォルトで透けて見えます。

2.1. 基本色：background-colorプロパティ

このプロパティはボックスの背景色を設定します。 この色は、背景画像の背面に描画されます。

h1 { background-color: #F00 } /* 背景を赤に設定 */

背景色は、 最も下層のbackground-clip値と 関連付けられた背景画像レイヤー に従ってクリッピングされます。

2.2. 画像ソース：background-image プロパティ

このプロパティは要素の背景画像を指定します。 画像は、最初に指定されたものが最前面（ユーザーに最も近い位置）に描画され、それ以降は前の画像の裏側に重ねて描画されます。 このプロパティの値は、カンマ区切りの<bg-image>値のリストです。

<bg-image> = <image> | none

noneの値は背景画像レイヤーとしてカウントされますが、何も描画しません。 空の画像（幅や高さがゼロ）、ダウンロードに失敗した画像、または（対応しない画像形式などで）表示できない画像も、レイヤーとしてカウントされますが、何も描画されません。

§ 3 複数背景画像のレイヤー化を参照してください。background-imageが他のカンマ区切りの背景プロパティとどのように連携し、それぞれの背景画像レイヤーを構成するかについて説明しています。

背景画像を設定する際は、画像が利用できない場合でもテキストとのコントラストを保てるよう、background-colorも指定するべきです。

アクセシビリティの観点から、重要な情報を伝達する唯一の方法として背景画像を使用すべきではありません。 Web Content Accessibility Guideline F3 [WCAG20]を参照してください。 画像はグラフィカルでない表示環境では利用できず、とくに背景画像はハイコントラスト表示モードで無効化されることがあります。

注: スタイル目的の前景画像はCSSのcontent プロパティで指定できます。意味的に重要な前景画像は、HTMLの<img>タグのようにマークアップ内で指定してください。

注:メディアフラグメントで画像の一部分だけを表示できます。 CSS Imagesモジュールは画像フォーマットのフォールバック構文やその他の制御も提供します。

html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

実装によっては、見えない画像（例：他の完全に不透明な画像の背後にある場合）をダウンロード・描画しないことで最適化を行う場合があります。

2.3. 画像のタイル化：background-repeat-x、background-repeat-y、background-repeat-block、background-repeat-inlineプロパティ

<repetition> = repeat | space | round | no-repeat

これらのプロパティは、背景画像がサイズ調整および配置された後、1つの軸方向にどのようにタイルするかを指定します。

repeat

指定された方向へ、背景描画領域を覆うまで画像を繰り返します。

space

指定された方向に、背景配置領域内に切り取られず収まる最大個数だけ画像を並べ、その後、繰り返した画像間を均等にスペースで埋めます。 最初と最後の画像は領域の端に接します。 背景描画領域が背景配置領域より大きい時は、パターンが背景描画領域全体に繰り返されます。 この方向で画像が2つ並べられない場合のみ一つだけ配置され、その位置決定にはbackground-positionプロパティが使われます。

round

指定された方向に背景配置領域へ収まる最大個数だけ画像を繰り返します。 整数個入らない場合、画像のサイズを調整してぴったり収まるようにします。 詳しくはbackground-sizeの説明式を参照してください。 背景描画領域が背景配置領域より大きい場合は、パターンが背景描画領域全体に繰り返されます。

no-repeat

指定された方向に画像を1回のみ配置し、繰り返しません。

いずれかの軸がno-repeatでない限り、背景描画領域全体にタイルされます（縦または横1列だけではありません）。

例:

body {
  background: white url("pendant.png");
  background-repeat-y: repeat;
  background-position: center;
}

§ 3 複数背景画像のレイヤー化セクションで、background-repeat-x、background-repeat-y、background-repeat-block、 background-repeat-inlineが他のカンマ区切りの背景プロパティとどのように連携して各背景画像レイヤーを構成するか説明しています。

2.4. 画像のタイル化ショートハンド：background-repeatプロパティ

このショートハンドは、background-repeat-x および background-repeat-y ロングハンドプロパティの値を設定します。

<repeat-style> = repeat-x | repeat-y | repeat-block | repeat-inline | <repetition>{1,2}

<repeat-style> の単独値は次の意味になります：

repeat-x

repeat no-repeat に算出されます。

repeat-y

no-repeat repeat に算出されます。

repeat-block

repeat が ブロック軸 、no-repeat が インライン軸 に割り当てられます。

repeat-inline

repeat が インライン軸 、no-repeat が ブロック軸 に割り当てられます。

repeat

repeat repeat に算出されます。

space

space space に算出されます。

round

round round に算出されます。

no-repeat

no-repeat no-repeat に算出されます。

<repeat-style> の値が2つのキーワードを持つ場合、最初のものが水平方向、2番目が垂直方向を意味します。

例:

body {
  background-image: url(dot.png) white;
  background-repeat: space;
}

§ 3 複数背景画像のレイヤー化 セクションで、background-repeat が他のカンマ区切りの背景プロパティとどのように連携して各背景画像レイヤーを形成するか説明しています。

'background-repeat: extend' を追加すべきか？

2.5. 画像の固定：background-attachment プロパティ

もし背景画像が指定されている場合、このプロパティはそれらがビューポート（fixed）に固定されるのか、ボックスとともにスクロールする（scroll）、もしくはその内容とともにスクロールする（local）かを指定します。プロパティ値はカンマ区切りの<attachment>キーワードのリストとして指定されます。

<attachment> = scroll | fixed | local

fixed

背景はビューポートに対して固定されます。ページメディアのようにビューポートが存在しない場合、fixed背景はページボックス基準で固定され、すべてのページに複製されます。

注: ビューごとにビューポートは1つだけです。ボックスがスクロールコンテナであっても、fixed背景はボックスと一緒に動きません。

local

背景はボックスの内容に対して固定されます。ボックスにスクロール機構がある場合、背景は内容と一緒にスクロールし、背景描画領域と背景配置領域はボックスのスクロール可能なオーバーフロー領域を基準に計算されます（境界線で囲まれているわけではありません）。スクロール可能なオーバーフロー領域は境界線エリアを含まないため、スクロールコンテナにおいてはborder-box値のbackground-clipはpadding-boxと同じ扱いとなる場合があります。

scroll

背景はボックス自体に対して固定され、中身と一緒にはスクロールしません（実質的にボックスの境界線に固定されます）。

画像がfixedの場合でも、ボックスの背景描画領域に含まれる時だけ表示されます。そうでないとクリッピングされ見えません。（背景画像がクリッピングされないケースについては§ 4 特別な要素の背景を参照。）このため、画像がタイルされていない場合は見えないことがあります。

body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

注: fixed背景をサポートしないユーザーエージェント（例：ハードウェア制限などによる）の場合、fixedキーワードを含む宣言は無視されます。例：

body {
  /* 全UA向け: */
  background: white url(paper.png) scroll;
  /* fixed背景が可能なUA向け: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 全UA向け: */
  background: silver;
  /* fixed背景が可能なUA向け: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

§ 3 複数背景画像のレイヤー化で、 background-attachmentが他のカンマ区切りの背景プロパティとどう連携し各背景画像レイヤーを構成するかを説明しています。

2.6. 背景位置調整：background-position-x、background-position-y、background-position-inline、background-position-blockプロパティ

このセクションはまだ作業中です。start/endキーワードをうまく機能させることが難しい点です。

このプロパティは背景位置の水平方向成分を指定します。原点キーワードが省略された場合はleftとみなします。

このプロパティは背景位置の垂直方向成分を指定します。原点キーワードが省略された場合はtopとみなします。

このプロパティは背景位置のインライン軸成分を指定します。原点キーワードが省略された場合はstartとみなします。

このプロパティは背景位置のブロック軸成分を指定します。原点キーワードが省略された場合はstartとみなします。

<percentage>

パーセンテージによる水平オフセットは(背景配置領域の幅 - 背景画像の幅)に対する割合です。垂直オフセットのパーセンテージは(背景配置領域の高さ - 背景画像の高さ)に対する割合です。画像サイズはbackground-sizeで決まります。

例：値が0% 0%なら画像の左上角が、たいていボックスのパディングエッジ左上角に揃います。 100% 100%なら右下角が領域の右下に揃います。 75% 50%なら、画像の水平方向75%、垂直方向50%の点が領域の同位置に合わせられます。

<length>

長さ値は固定オフセットになります。たとえば2cm 1cmなら画像の左上が、背景配置領域の左上から水平方向2cm、垂直方向1cmの地点に配置されます。

top

値が1個または2個の場合、垂直位置として0%に算出されます。それ以外の場合は次のオフセットのための上端原点指定となります。

right

値が1個または2個の場合、水平位置として100%に算出されます。それ以外の場合は次のオフセットのための右端原点指定となります。

bottom

値が1個または2個の場合、垂直位置として100%に算出されます。それ以外の場合は次のオフセットのための下端原点指定となります。

left

値が1個または2個の場合、水平位置として0%に算出されます。それ以外の場合は次のオフセットのための左端原点指定となります。

center

水平方向未指定時は50%（left 50%）、 垂直方向未指定時は50%（top 50%）として算出されます。

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

background-position: right 3em bottom 10px

§ 3 複数背景画像のレイヤー化で、 background-positionが他のカンマ区切りの背景プロパティとどう連携して各背景画像レイヤーを構成するかを説明しています。

2.7. 背景位置ショートハンド：background-position ショートハンドプロパティ

もし背景画像が指定されている場合、このプロパティは、それぞれの背景配置領域内での（リサイズ後の）初期位置を指定します。

このプロパティはショートハンドプロパティであり、background-position-x、background-position-y、background-position-block、background-position-inline をひとつの宣言でまとめて設定します。

値は、カンマ区切りの<bg-position>値のリストで与えます。これらは、リサイズ済みの背景画像を配置対象、背景配置領域を配置コンテナとする<position>値として解釈されます。

注: キーワード同士の組み合わせなら順番を入れ替え可能ですが、キーワード＋長さやパーセンテージの組み合わせは順番を替えられません。したがって center left は有効ですが 50% left は無効です。

3つまたは4つの値が指定された場合、各<length-percentage>はオフセットを表し、必ず前にどの端からのオフセットかを示すキーワードが必要です。例えば、background-position: bottom 10px right 20pxは、下端から上へ10px、右端から左へ20pxの位置を表します。3個の場合、省略されたオフセットは0とみなします。

正の値は背景配置領域の端から内側へのオフセット、負の値は背景配置領域の端から外側へのオフセットです。

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

<bg-position> =  <position> | <position-three>
<position-three> = [
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]
|
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]
]

<length-percentage> をbackground-position専用の<position-three>構文バリアントで省略した場合、デフォルトは0%です。

ロングハンドプロパティがどのように設定されるか、記述すること。[Issue #9690]

2.7.1. background-position値の直列化

指定値および算出値としての<bg-position>型は、[CSS-VALUES-4]で<position>について定義されたとおりに直列化されます。3値生成（<position>では無効）は、指定値直列化時に対応する4値構文と同一ですが、省略されたオフセットのみ残ります。

2.8. 描画領域：background-clipプロパティ

背景描画領域を決定します。これは背景が描画される領域を指定します。プロパティの構文は以下の通りです。

<bg-clip> = <visual-box> | [ border-area || text ]

あるいは、ここで-webkit-background-clipプロパティを定義し、すべての値が同一であること、さらにこのtext値が追加されることを記述すべきか？

<visual-box>

背景は、要素の指定されたボックス内（クリップされた範囲）で描画されます。

text

背景は、ボーダーボックスとテキストのジオメトリ（下線や強調記号を含む）および要素内とフロー内・浮動子子孫を考慮した交差領域内（クリップされた範囲）で描画されます。テキストの色は背景描画には影響しません。

border-area

背景は、ボーダーが描画される領域でクリップされます。この時、border-widthやborder-styleは考慮されますが、border-colorによる透過は無視されます。

両方のborder-areaとtextが指定された場合、背景はこれら2つの領域の和集合内（クリップされた範囲）で描画されます。

注: ルート要素は異なる背景描画領域を持つため、background-clipプロパティを指定しても効果がありません。§ 4 特別な要素の背景を参照してください。

注: 背景は常に（ある場合）ボーダーの後ろに描画されます。詳しくは[CSS2]付録E「積層コンテキストの詳細説明」を参照してください。

CSS Borders and Box Decorations 4 § 3.3 コーナーシェーピング：corner-shapeプロパティで、border-radiusが背景描画領域の形状にどのように影響するかを確認してください。

§ 3 複数背景画像のレイヤー化を参照し、background-clipが他のカンマ区切りの背景プロパティと互いにどう連携し各背景画像レイヤーを形成するかを確認してください。

2.9. 配置領域：background-originプロパティ

このプロパティは、背景配置領域（background positioning area）を決定します。 これは、任意の背景画像が配置される領域です。 複数のボックス断片（例：複数行のインラインボックス、複数ページのボックス）としてレンダリングされる要素については、 どのボックスへbox-decoration-break [CSS-BREAK-3]を適用するか（＝どの背景配置領域とするか）を決定します。

padding-box

位置はパディングボックスに対して指定されます。 （単一ボックスの場合、0 0はパディングエッジの左上隅、100% 100%は右下隅です。）

border-box

位置はボーダーボックスに対して指定されます。

content-box

位置は内容ボックスに対して指定されます。

このbackground-attachment値が このレイヤーでfixedの場合は、このプロパティは効果を持ちません。 この場合、背景配置領域は 初期包含ブロックになります。

注: background-clipがpadding-box、 background-originがborder-box、 background-positionがtop left（初期値）で、 要素が非ゼロのボーダーを持つ場合、背景画像の上端や左端がクリップされます。

§ 3 複数背景画像のレイヤー化を参照してください。background-originが他のカンマ区切りの背景プロパティとどのように連携して各背景画像レイヤーを形成するかについて説明されています。

2.10. 画像サイズ指定：background-sizeプロパティ

このプロパティは各背景画像のサイズを指定します。 値はカンマ区切りの<bg-size>値のリストとして与えられます。

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

値の意味は以下の通りです：

contain

画像の本来のアスペクト比（もしあれば）を保持したまま、 幅・高さの両方が背景配置領域内に収まる最大サイズに拡大・縮小します。

cover

画像の本来のアスペクト比（もしあれば）を保持したまま、 幅・高さの両方が背景配置領域を完全に覆う最小サイズに拡大・縮小します。

[ <length-percentage [0,∞]> | auto ]{1,2}

1つめの値は対応する画像の幅、2つめは高さを指定します。 1つだけの場合、2つめはautoと見なされます。

<percentage>は背景配置領域に対する割合です。

一方がautoの場合、 画像の本来のアスペクト比と、もう一方の寸法をもとに解決されます。 アスペクト比や寸法がなければ画像の本来のサイズ、 それもなければ100%として扱われます。

両方がautoの場合は画像の本来の幅・高さが使われ、 どちらかが欠けていれば上記のautoの扱いになります。 画像に本来のサイズがなければcontain扱いになります。

負の値は無効です。

div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box;
}

p {
  background-size: 15px 15px;
  background-image: url(tile.png);
}

body {
  background-size: auto;            /* default */
  background-image: url(flower.png);
}

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30%;
}

一方または両方の次元でbackground-repeatがroundの場合は第2ステップがあり、画像が背景配置領域に整数個ちょうど収まるようスケールします。 幅（高さも同様）の場合は：

X ≠ 0 をステップ1後の画像の幅、W を背景配置領域の幅とすると、 丸め後の幅 X' = W / round(W / X) で、round()は1以上の最も近い整数を返します。

一方の次元だけbackground-repeatがroundで、もう一方のbackground-sizeがautoなら、 第3ステップとしてもう一方の次元も元のアスペクト比が保たれるようスケールします。

div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* default */
  background-size: auto;             /* default */
}

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* default */
  background-size: 3em;              /* = '3em auto' */
}

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto;
}

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto;
}

div {
  background-image: url(image5.png);
  background-repeat: round;
  background-size: auto 4em;
}

背景画像の幅または高さが0になる場合、画像は描画されません（透明画像の場合と同様）。

§ 3 複数背景画像のレイヤー化で、background-sizeが他のカンマ区切りの背景プロパティとどのように連携して 各背景画像レイヤーを形成するか説明しています。

2.10.1. background-size 値の直列化

指定値・算出値 としての<bg-size>型は、たとえ2つめの値がautoであっても 常に2値として直列化されます。これは最短かつ後方互換な直列化原則に基づきます。

2.11. 背景画像レイヤー：background-tbdショートハンドプロパティ

background-tbdプロパティはショートハンドプロパティであり、backgroundショートハンドと同じプロパティ群を一括設定しますが、background-colorは除外されます。 これにより著者は背景色を独立して継承させつつ、背景画像の宣言と位置指定を簡単にできます。

このプロパティ名はissue 9083で議論中です。

p {
  background-color: green;
}

p {
  background-tbd:
    url(a.png) top left,
    url(b.png) top left no-repeat;
}

p {
  background: url(pass.png) green;   /* valid */
  background-tbd: url(fail.png) red; /* invalid */
}

2.12. 背景ショートハンド：backgroundプロパティ

backgroundプロパティは、ほとんどの背景用プロパティをスタイルシート内の同じ場所で設定するためのショートハンドプロパティです。 カンマ区切りのアイテムの数は、背景画像レイヤーの数を決定します。 有効な宣言がある場合、各レイヤーについてショートハンドはまずbackground-image、background-position、background-size、background-repeat、background-origin、background-clip、background-attachmentの各プロパティを それぞれの初期値へ設定し、その後宣言で明示的に指定された値を割当てます。 最後にbackground-colorは指定された色で、なければ初期値で設定されます。

このプロパティの値はカンマ区切りの値のリストとして指定し、

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <bg-clip> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <bg-clip> || <visual-box> || <'background-color'>

注: <final-bg-layer> では色指定が可能ですが、<bg-layer>ではできません。

ひとつの<visual-box>値があれば、 background-originとbackground-clipの両方にその値が設定されます。 ただし、background-clipのみ有効な値が指定された場合は background-clipにはその値、background-originにはborder-boxが設定されます。 2つの<visual-box>値が指定された場合、前者がbackground-origin、後者がbackground-clipに使われます。

body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }

body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }

p {
  background-color: gray;
  background-position: 40% 50%;
  background-size: 10em auto;
  background-repeat: round;
  background-clip: border-box;
  background-origin: border-box;
  background-attachment: fixed;
  background-image: url(chess.png);
}

E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

div {
  background: padding-box url(paper.jpg) white center;
}

div {
  background-color: white;
  background-image: url(paper.jpg);
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: center;
  background-clip: padding-box;
  background-origin: padding-box;
  background-size: auto auto;
}

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

3. 複数背景画像のレイヤー化

ボックスの背景は複数の背景画像レイヤーを持つことができます。 レイヤー数はbackground-imageプロパティのカンマ区切り値の数で決まります。 none値もレイヤーを作る点に注意してください。

各背景画像は他の背景プロパティの対応する値に従ってサイズ、位置決め、タイル化されます。 リストは先頭から合わせて使い、余剰値は無視されます。 もしプロパティのカンマ区切り値がレイヤー数に満たなければ、UAは値リストを繰り返して使用値を計算します。

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

リストの最初の画像がユーザーに最も近いレイヤーとして描画され、 次のものはその背後に、それ以降も順次背後に描画されます。 背景色（あれば）は、すべてのレイヤーより下に描画されます。

注: border-imageプロパティでも背景画像を定義可能であり、 その場合、border-imageの画像はbackgroundプロパティで作成される背景レイヤーの上に描画されます。

4. 特殊な要素の背景

ドキュメントのキャンバスはドキュメントの描画対象となる無限の面です。[CSS2]　どの要素もキャンバスには対応しませんが、 キャンバスのスタイリングを可能にするため、CSSはルート要素（HTMLの場合は<body>要素）の背景を、下記のようにキャンバスへ伝播させます。 ただし、キャンバスとして背景が使われる要素がdisplay: noneなら、 キャンバス背景は透明になります。

キャンバス背景が不透明でない場合、 その下にあるキャンバス地が透けて見えます。 キャンバス地の質感はUA依存ですが （典型的には不透明な白）であることが多いです。

4.1. キャンバス背景とルート要素

ルート要素の背景はキャンバス背景になり、その背景描画領域は キャンバス全体をカバーします。 ただし画像はその要素ボックス基準でサイズや位置が決定され、その要素専用に描画された場合と同じ扱いを受けます。 （つまり背景配置領域はルート要素で決まります。） ルート要素自身はその背景を再度描画しません。つまり、その背景の使用値はtransparentです。

4.2. キャンバス背景とHTML <body> 要素

ルート要素が HTML HTML 要素 または XHTML html 要素 [HTML] である文書の場合： 算出値 が、background-image は ルート要素 上で none かつ background-color が transparent の場合、 ユーザーエージェントは代わりに その要素の最初の HTML BODY または XHTML body 子要素から 背景プロパティの算出値を伝播しなければなりません。 その BODY 要素の背景プロパティの 使用値は 初期値 となり、 伝播された値はルート要素上で指定されたかのように扱われます。 HTML文書の作者はキャンバス背景を HTML 要素ではなく BODY 要素で指定することが推奨されます。

注: containment を使用すると、HTML body 要素に対するこの特別な扱いが無効化されます。 詳細は CSS Containment 1 § 2 強いcontainment: containプロパティ を参照してください。

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>キャンバスの背景設定</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>私の背景はmarbleです。</p>
  </body>
</html>

4.3. ::first-line 疑似要素の背景

::first-line 疑似要素は、 背景の観点ではインラインレベル要素のように扱われます （詳しくは [CSS2] セクション5.12.1 を参照）。 つまり、例えば左揃えの最初の行では、 背景が必ずしも右端まで伸びるとは限らないということです。

5. 変更点

5.1. [CSS3BG]以降の追加事項

• background-position をショートハンド化し、物理および論理のロングハンドを追加

• <bg-position> に論理キーワードを追加

• border-area と text の値を background-clip に追加

• background-tbd を追加

• background-repeat-* のロングハンドを追加

• repeat-block および repeat-inline の論理キーワードを background-repeat に追加

6. 謝辞

このモジュールの前身である [CSS1]、[CSS2]、および [CSS3BG] に対する多くの貢献者に加えて、 編集者は本 Level 4 に関する提案とフィードバックのために Tab Atkins, および Håkon Wium Lie に感謝します。

プライバシーに関する考慮事項

本仕様について新たなプライバシーの考慮事項は報告されていません。

セキュリティに関する考慮事項

本仕様について新たなセキュリティの考慮事項は報告されていません。