body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
背景画像の1つのコピーが中央に配置され、他のコピーがその上下に配置されて要素の背後に垂直の帯を形成します。
目次
CSSプロパティを使用すると、著者は要素の前景色と背景を指定できます。背景は色または画像にすることができます。背景プロパティを使用すると、背景画像の位置を指定したり、繰り返し設定を行ったり、ビューポートに対して固定するか、文書と一緒にスクロールさせるかを宣言することができます。
有効な色値の構文については、色単位のセクションを参照してください。
| 名前: | color |
|---|---|
| 値: | <color> | inherit |
| 初期値: | ユーザーエージェントに依存 |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
このプロパティは、要素のテキスト内容の前景色を記述します。赤を指定するには、以下のような方法があります:
em { color: red } /* 事前定義された色名 */
em { color: rgb(255,0,0) } /* RGB 範囲 0-255 */
著者は要素（つまり、そのレンダリング領域）の背景を色または画像として指定できます。ボックスモデルにおいて、「背景」はコンテンツ、パディングおよびボーダー領域の背景を指します。ボーダーの色とスタイルはボーダープロパティで設定します。マージンは常に透明です。
背景プロパティは継承されませんが、'background-color' の初期値が 'transparent' であるため、親ボックスの背景がデフォルトで透過して見えます。
ルート要素の背景はキャンバスの背景となり、キャンバス全体を覆います。この背景は、'background-position' のアンカー位置でルート要素自身のみに描画される場合と同じポイントに固定されます。ルート要素はこの背景を再び描画しません。
ただし、HTML文書の場合、著者はHTML要素ではなくBODY要素の背景を指定することをお勧めします。 ルート要素がHTMLの "HTML" 要素またはXHTMLの "html" 要素であり、'background-color' が 'transparent' の計算値を持ち、'background-image' が 'none' の計算値を持つ場合、ユーザーエージェントは代わりにその要素の最初のHTML "BODY" 要素またはXHTML "body" 要素の背景プロパティの計算値を使用してキャンバスの背景を描画し、その子要素の背景を描画しないようにしなければなりません。この背景もルート要素のみに描画される場合と同じポイントにアンカーされなければなりません。
しかし、キャンバスの背景として使用される要素がボックスを生成しない場合、キャンバスの背景は透明になります。（CSS 2.2では、要素またはその祖先が 'display: none' の場合に該当します。）
要素が 'visibility: hidden' だが 'display: none' ではない場合、ボックスは生成されます。そのため背景はキャンバスに使用されます。
これらの規則に従うと、次のHTML文書のキャンバスは「大理石」の背景を持つことになります:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<TITLE>キャンバスの背景を設定する</TITLE>
<STYLE type="text/css">
BODY { background: url("http://example.com/marble.png") }
</STYLE>
<P>私の背景は大理石です。
BODY要素のルールは、HTMLソースでBODYタグが省略されていても、HTMLパーサーが欠落したタグを補完するため機能します。
スタッキングコンテキストを形成する要素（'z-index' プロパティを参照）の背景は、その要素のスタッキングコンテキストの下部に描画され、そのスタッキングコンテキスト内の他のすべてのものの下に配置されます。
| 名前: | background-color |
|---|---|
| 値: | <color> | transparent | inherit |
| 初期値: | transparent |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
このプロパティは、要素の背景色を設定します。値には、<color> または 'transparent' というキーワードを指定して、下地の色を透過させることができます。
h1 { background-color: #F00 }
| 名前: | background-image |
|---|---|
| 値: | <uri> | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 絶対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 |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
背景画像が指定されている場合、このプロパティは画像が繰り返される（タイル状に表示される）かどうか、またどのように繰り返されるかを指定します。すべてのタイル表示は、コンテンツ、パディング、およびボーダー領域をカバーします。
インライン要素の背景画像のタイル表示と位置決めは、この仕様では未定義です。CSSの将来のレベルで定義される可能性があります。
値の意味は次の通りです:
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
背景画像の1つのコピーが中央に配置され、他のコピーがその上下に配置されて要素の背後に垂直の帯を形成します。
| 名前: | background-attachment |
|---|---|
| 値: | scroll | fixed | inherit |
| 初期値: | scroll |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
背景画像が指定されている場合、このプロパティは画像がビューポートに対して固定されるか（'fixed'）、または包含ブロックと一緒にスクロールされるか（'scroll'）を指定します。
1つのビューにビューポートは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; /* すべてのUA向け */
background: white url(ledger.png) fixed; /* fixed背景をサポートするUA向け */
}
詳細については、適合性に関するセクションを参照してください。
| 名前: | background-position |
|---|---|
| 値: | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| 初期値: | 0% 0% |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | ボックス自体のサイズを参照 |
| メディア: | 視覚 |
| 計算値: | <length>の場合は絶対値、それ以外はパーセンテージ |
背景画像が指定されている場合、このプロパティはその初期位置を指定します。値が1つだけ指定されている場合、2番目の値は 'center' と見なされます。少なくとも1つの値がキーワードでない場合、最初の値は水平方向の位置を、2番目の値は垂直方向の位置を表します。負の <percentage> および <length> の値も許可されます。
ただし、画像に固有の比率があるが固有のサイズがない場合、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% */
この仕様では、インライン要素の背景画像のタイル表示や位置決めは未定義です。CSSの将来的なレベルでインライン要素の背景画像のタイル表示や位置決めが定義される可能性があります。
背景画像がビューポート内で固定されている場合（ プロパティを参照）、画像は要素のパディングボックスではなくビューポートに対して配置されます。例えば、
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-position'>] | inherit |
| 初期値: | 個別プロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | 'background-position' で許可される |
| メディア: | 視覚 |
| 計算値: | 個別プロパティを参照 |
'background' プロパティは、個別の背景プロパティ（'background-color'、'background-image'、'background-repeat'、 および 'background-position' をスタイルシート内で一括設定するための短縮プロパティです。
有効な宣言が与えられた場合、'background' プロパティは、まずすべての個別の背景プロパティをその初期値に設定し、次に宣言で与えられた明示的な値を割り当てます。
次の例の最初のルールでは、'background-color' の値のみが指定されており、他の個別プロパティは初期値に設定されています。2番目のルールでは、すべての個別プロパティが指定されています。
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }