14 色と背景

CSSプロパティは、著者が前景色と要素の背景を指定することを可能にする。背景は、色または画像であってもよい。背景のプロパティは、著者が背景画像を配置する、背景を繰り返す、背景がビューポートに対して固定または文書と一緒にスクロールすべきかどうかを宣言することを可能にする。

妥当な色の値の構文は、色の節を参照のこと。

14.1 前景色：'color'プロパティ

プロパティ名：	color
値：	<color> \| inherit
初期値：	ユーザーエージェントに依存
適用要素：	すべての要素
継承：	yes
パーセンテージ：	利用不可
メディア：	visual
算出値：	指定される

このプロパティは、要素のテキストコンテンツの前景色を表現する。赤を指定するさまざまな方法がある：

em { color: red }              /* 定義済み色名 */
em { color: rgb(255,0,0) }     /* RGB範囲0-255 */

14.2 背景

著者は、色または画像のいずれかとして要素の背景（すなわち、レンダリング表面）を指定してもよい。ボックスモデルの見地から、"background"はコンテンツ、パディング、ボーダー領域の背景を参照する。ボーダーの色およびスタイルはボーダーのプロパティで設定される。マージンは常に透明である。

背景プロパティは継承されないが、親ボックスの背景は、'background-color'の初期'transparent'値のためにデフォルトで透けて見える。

あたかも背景がルート要素自身に対してのみ描かれるかのように存在するだろう同じ場所で（'background-position'に対して）固定されつつ、ルート要素の背景はキャンバスの背景となり、かつキャンバス全体を覆う。ルート要素は、再びこの背景を描かない。

しかし、HTML文書に対して、著者はHTML要素よりもBODY要素の背景を指定することを推奨する。'background-color'の'transparent'と'background-image'の'none'との値を計算した、ルート要素がHTMLの"HTML"要素またはXHTMLの"html"の要素である文書に対して、ユーザーエージェントは、キャンバスの背景を描く場合、その要素の最初のHTMLの"BODY"要素またはXHTMLの"body"要素の子からの背景プロパティの算出値を代わりに使用しなければならず、その子要素の背景を描画してはならない。背景がルート要素にのみ塗られた場合、このような背景はまた背景のように同じ位置に固定しなければならない。

しかし、キャンバスの背景に使用される要素の背景に対してどのボックスも生成されない場合、キャンバスの背景は透過である。（CSS 2.2において、これは要素または祖先が'display: none'を持つ場合である。）

要素が'visibility: hidden'を持つが'display: none'を持たない場合、ボックスは要素に対して生成されかつその要素の背景はキャンバスに対して使用されることに注意する。

この規則に従って、次のHTML文書の下敷きとなるキャンバスは"marble"の背景を持つ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <TITLE>Setting the canvas background</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://example.com/marble.png") }
    </STYLE>
    <P>My background is marble.

HTMLパーサーは存在しないタグを推論するので、BODY要素の規則は、BODYタグがHTMLソースでは省略されているにもかかわらず動作することに注意する。

スタックコンテキスト（'z-index'プロパティを参照）を形成する要素の背景は、そのスタックコンテキストで何かの下の、要素のスタッキングコンテキストの下部に描かれる。

14.2.1 背景のプロパティ：'background-color'、'background-image'、'background-repeat'、'background-attachment'、'background-position'、'background'

プロパティ名：	background-color
値：	<color> \| transparent \| inherit
初期値：	transparent
適用要素：	すべての要素
継承：	no
パーセンテージ：	利用不可
メディア：	visual
算出値：	指定される

このプロパティは、要素の背景色を設定する。下敷きになる色が透けて見えるようにするには、<color>値または'transparent'キーワードのいずれかを設定する。

h1 { background-color: #F00 }

プロパティ名：	background-image
値：	<uri> \| none \| inherit
初期値：	none
適用要素：	すべての要素
継承：	no
パーセンテージ：	利用不可
メディア：	visual
算出値：	絶対URIまたはnone

このプロパティは要素の背景画像を設定する。背景画像を設定する場合、著者は画像が使用不能である場合に使用される背景色を指定すべきである。画像が使用可能である場合、背景色の上にレンダリングされる。（したがって、色は画像の透明部分で表示される）。

このプロパティの値は、画像を指定する<uri>、またはどの画像も使用されない場合の'none'のいずれかである。

body { background-image: url("marble.png") }
p { background-image: none }

パーセンテージとして表される内在次元は、'background-position'プロパティの座標系を設置し、矩形の大きさに対して相対的に解決されなければならない。

画像が内在幅または高さと内在比のいずれか一方を持つ場合、不足している次元が与えられた次元との比から計算される。

画像が内在幅または内在高さのいずれか一方を持ち、内在アスペクト比を持たない場合、不足している次元は'background-position'プロパティの座標系を設置し、矩形の大きさであると見なされる。

画像が内在次元を持たず、かつ内在比を持つ場合、次元は'background-position'プロパティの座標系を設置する矩形のどちらの次元を超えないような比で最大の次元であると仮定しなければならない。

画像が内在比を持たない場合、次元は'background-position'プロパティの座標系を設置し、矩形であると仮定しなければならない。

プロパティ名：	background-repeat
値：	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit
初期値：	repeat
適用要素：	すべての要素
継承：	no
パーセンテージ：	利用不可
メディア：	visual
算出値：	指定される

背景画像が指定される場合、このプロパティは画像が繰り返されるかどうか（タイル状）、そしてどのように繰り返すかを指定する。すべてのタイルは、ボックスのコンテンツ、パディングとボーダー領域を覆う。

インライン要素の背景画像の敷き詰めと配置は、この仕様で未定義である。将来のCSSレベルは、インライン要素に背景画像の敷き詰めと配置を定義してもよい。

値は次の意味を持つ：

repeat: 画像は水平方向と垂直方向の両方に繰り返される。
repeat-x: 画像は水平方向にのみ繰り返される。
repeat-y: 画像は垂直方向にのみ繰り返される。
no-repeat: 画像は繰り返されない：1つのみの画像のコピーが描画される。

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

背景画像を中央に1枚置き、その上下（コンテンツ領域とパディング領域）に同じ画像を敷き詰めている [D]

背景画像を中央に1枚置き、その上下に同じ画像を敷き詰めて縦帯を形成する

プロパティ名：	background-attachment
値：	scroll \| fixed \| inherit
初期値：	scroll
適用要素：	すべての要素
継承：	no
パーセンテージ：	利用不可
メディア：	visual
算出値：	指定される

背景画像が指定される場合、このプロパティは、ビューポートに関して固定される（'fixed'）、または包含ブロックとともにスクロールする（'scroll'）かどうかを指定する。

ビューごとに1つのビューポートがあることに注意する。要素がスクロール機構（'overflow'を参照）を持つ場合、'fixed'の背景要素は要素とともに移動せず、'scroll'背景はスクロール機構とともに移動しない。

たとえ画像が固定される場合でも、要素のコンテンツ、パディングまたはボーダー領域にある場合にのみ表示される。したがって、画像がタイル状の場合（'background-repeat: repeat'）を除き、画像は不可視であってもよい。

ビューポートがないページメディアにおいて、'fixed'の背景はページボックスに対して固定されるため、ページごとに複製される。

この例は、要素がスクロールされる場合にビューポートに"接着"のまま無限の縦帯を作成する。

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

'fixed'の背景をサポートしない（たとえばハードウェアプラットフォームの制限に起因するなど）ユーザーエージェントは、キーワード'fixed'をもつ宣言を無視すべきである。たとえば：

body {
  background: white url(paper.png) scroll; /* すべてのユーザーエージェント */
  background: white url(ledger.png) fixed; /* 固定背景にするユーザーエージェント */
}

詳細は適合性の節を参照のこと。

プロパティ名：	background-position
値：	[ [ <percentage> \| <length> \| left \| center \| right ] [ <percentage> \| <length> \| top \| center \| bottom ]? ] \| [ [ left \| center \| right ] \|\| [ top \| center \| bottom ] ] \| inherit
初期値：	0% 0%
適用要素：	すべての要素
継承：	no
パーセンテージ：	ボックス自身の大きさを参照
メディア：	visual
算出値：	<length>は絶対値、そうでなければパーセンテージ

背景画像が指定されている場合、このプロパティはその背景画像の初期位置を指定する。1つの値のみが指定される場合、2番目の値は'center'を仮定する。少なくとも1つの値がキーワードでない場合は、最初の値は水平方向の位置を表し、2番目は垂直位置を表す。負の<percentage>と<length>値は許可される。

<percentage>: あるパーセンテージXは、位置X%横（水平）または下に（垂直方向）要素のパディングボックスとともに、位置X%横（水平）または下に（垂直）画像の位置を調整する。たとえば、'0% 0%'の値のペアで、画像の左上角はパディングボックスの左上角に揃えて配置される。'100%100%'の値のペアは、パディングボックスの右下隅に画像の右下隅を配置する。'14% 84%'の値のペアは、画像の左から14%上から84%の点と、ボックスのパディング領域の左から14%上から84%の点を揃える。
<length>: 長さLは、画像の左上隅を要素のパディングボックスの左上隅から距離L右（水平）または下（垂直）の位置に調整する。たとえば、'2cm 1cm'の値のペアで、画像の左上隅から右に2cm、パディングボックスの左上隅から下に1cmに配置される。
top: 垂直位置'0%'に等しい。
right: 水平位置'100%'に等しい。
bottom: 垂直位置'100%'に等しい。
left: 水平位置'0%'に等しい。
center: 他の方法で与えられない場合は水平位置の'50%'に等しく、垂直位置の'50%'に等しい。

しかし、画像が内在の大きさでなく内在比を持つ場合、CSS 2.2で位置は未定義である。

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% */

背景画像がビューポート（'background-attachment'を参照）内に固定される場合、画像は要素のパディングボックスの代わりにビューポートに対して配置される。たとえば、

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

上記の例において、（単一の）画像がビューポートの右下隅に配置される。

プロパティ名：	background
値：	[<'background-color'> \|\| <'background-image'> \|\| <'background-repeat'> \|\| <'background-attachment'> \|\| <'background-position'>] \| inherit
初期値：	個々のプロパティを参照
適用要素：	すべての要素
継承：	no
パーセンテージ：	'background-position'で許可される
メディア：	visual
算出値：	個々のプロパティを参照

'background'プロパティは、スタイルシートの同じ場所で個別の背景のプロパティ（すなわち、'background-color'、'background-image'、'background-repeat'、'background-attachment'、'background-position'）を設定するための略式プロパティである。

妥当な宣言である場合、'background'プロパティは、まず初期値にすべての個別の背景のプロパティを設定し、宣言で指定された明示的な値を割り当てる。

次の例の最初の規則で、'background-color'の値のみが与えられ、他の個別のプロパティは初期値に設定される。2番目の規則で、すべての個別のプロパティが指定されている。

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }