解 説

backgroundプロパティ〜CSS3

複数の背景画像による多層化

CSS3 では、ボックスの背景は,複数の 層 ( layer )を持てます。複数の background-image の値は カンマで区切って区別します。 注目すべき点は値 none に対してもひとつの層が作成されることです。

backgroundimage1複数の背景画像を指定したら、他の background-* プロパティでも同様にカンマで区切って、サイズ指定、位置指定、リピートの方法を決められます。 これらの複数の値はbackground-imageで指定した複数の背景画像と照合され、それぞれの値の数が画像の数より多いと最初の値から適用されていき、余分な物は利用されません。 また、値の数が背景画像の数に満たない場合は前の値を繰り返して使用します。

background-* プロパティの指定例

上記の指定は次の宣言と同じ効果になります。

指定した値の最初の画像が最も上になり、その背後に次の画像が表示されます。 背景色は最背面に塗られます。

** border-image-* も、背景画像として利用できます。 border-image-*は background-* プロパティから作成される背景より手前に描画されます。

background-color プロパティ

名前 background-color
値 <color>
初期値 transparent
適用対象 すべての要素
継承 されない
百分率 利用不可
媒体 visual
算出値 算出色
アニメーション 色 として

このプロパティは、要素の 背景色 を設定します。 色はどの背景画像よりも背後に描かれます。
このプロパティはCSS2.1から特に変更や付け加えられたものはみられませんが、background-clip の影響をうけるところが注意点です。
背景色の塗り区画は、最も背後の背景画像層に設定したbackground-clip の値に従って表示されます。

background-clip:content-boxを使用した場合に背景色も影響を受ける例この例ではコンテンツ領域のみ背景色が着色されています。

background-image プロパティ

名前 background-image
値 <bg-image> [ , <bg-image> ]*
初期値 none
適用対象 すべての要素
継承 されない
百分率 利用不可
媒体 visual
算出値 指定に従う。 ただし, URI は絶対化される。
アニメーション 不可

このプロパティは、要素に対して複数の背景画像を設定します。 最初の値で指定した画像が最も上位に描かれ,後続する値による各画像は 先行する画像の背後に描かれます。

背景に四角形と丸と四角形を45度回転させた3枚の画像をbackground-imageで指定した例

ここで:<bg-image> = <image> | none値 none は、 1 枚の画像層として数えられますが何も描かれません。 画像として機能しないものも、同様に 1 層に数えられつつも何も描かれません。例えば、画像データの階層を間違えて表示できないときなどです。

背景画像を指定しない例と複数指定する例

ブラウザが対応していればsvg形式のものも使用可能です。

background-repeat プロパティ

名前 background-repeat
値 <repeat-style> [ , <repeat-style> ]*
初期値 repeat
適用対象 すべての要素
継承 されない
百分率 利用不可
媒体 visual
算出値 各 層値が[ 各 次元に対応する 2 個のキーワード ]であるような、リスト
アニメーション 不可

背景画像にサイズを設定し, 位置を指定した後に,背景画像の敷き詰め方法を指定します。

<repeat-style> が 2 値からなる場合の[ 最初/ 2 番目 ]のキーワード値は、[ 横/縦 ]方向に対する敷き詰め方法を与えます。

指定値 算出値
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat

それぞれの値の意味

repeat
画像は、この方向に,背景塗り区画を覆い尽くすまで必要なだけ繰り返されます。
space
背景画像はリピートされ、領域の左右上下のエッジには最初の画像と最後の画像がそれぞれ接触するように描画され、残ったスペースを画像間に均一に分配する形で表示されます。space 値の指定時には、その対象とする方向の background-position の指定は無効となります。一つの画像で領域幅を超える背景画像が指定された場合のみ、背景画像が切り抜かれます。結局のところ、各画像が見きれないように間にスペースを入れてX方向、Y方向に繰り返しを行うものです。未対応のブラウザが多いので確認が難しいです。
round
背景画像は指定された方向に切り抜き無しで描画領域全体を極力覆うよう繰り返されます。繰り返された画像が整数倍で収まりきらない場合、整数倍で収まるように拡大縮小されて表示されます。その上で描画対象領域が背景を繰り返した領域全体よりも大きい場合は、背景画像は残りの背景描画領域を覆うまで繰り返されます。各画像が見きれないように間に画像を縮小させてX方向、Y方向に繰り返しを行うものです。未対応のブラウザが多いので確認が難しいです。。
no-repeat
画像は 1 度だけ置かれ、繰り返しはされません

2 個のキーワードがいずれも no-repeat でない,ならば、背景塗り区画の全体が敷き詰められることになります。 — 縦または横に 1 本だけ帯状に伸ばされるようにはなりません。

例:中央寄せにされた背景画像は、ボーダーの上から下にかけて,[パディングと内容]の区画を貫くように繰り返されます。 repeat-y による効果として 1 枚の背景画像が中央寄せにされ, その上下に複製が繰り返されて,要素の背後に縦方向の帯を作ります。

background-attachment プロパティ

名前 background-attachment
値 <attachment> [ , <attachment> ]*
初期値 scroll
適用対象 すべての要素
継承 されない
百分率 利用不可
媒体 visual
算出値 指定値
アニメーション 不可

このプロパティは背景画像が指定された下で,それらが[ 表示域 【 viewport 】 に固定される( fixed ) ]か, [ 要素と伴にスクロールする( scroll ) ]か, [ その内容と伴にスクロールする( local ) ]かの,いずれになるかを指定します。 プロパティの値は「attachment」キーワードからなる,コンマ区切りの層値リストとして与えられます。

fixedはページ単位で固定されます。position:centerを指定すると要素の中央ではなく、ページの中央に配置されます。

<attachment> = scroll | fixed | local

fixed
背景は表示域に(ページ単位で)固定されます。
local
背景は要素の内容に固定されます。 要素がスクロールの仕組みを備えているならば、背景は要素の内容と伴にスクロールします。 また,背景塗り区画と背景位置決め区画は、それらの枠を成すボーダー域ではなく要素のスクロール可能域に相対的になります。 スクロール可能域はボーダーを含まないので、スクロール可能な要素においてはbackground-clip に対する値 border-box は, padding-box と同じに扱われてよいことになります。
scroll
背景は,要素内で固定され、その内容と伴にはスクロールしませんが、ページ単位では要素と共にスクロールします。

次の例は、要素がスクロールされても表示域に “貼り付く” ような,縦に無限に連なる帯を作成します。


fixed による背景を(例えばハードウェア的な限界により)サポートしない UA用にscrollなどを併用するとよいでしょう。

background-position プロパティ

名前 background-position
値 <position>[ ,]*
初期値 0% 0%
適用対象 すべての要素
継承 されない
百分率 背景位置決め区画のサイズから 背景画像のサイズを 引いた 結果に相対的 — 記述を見よ。
媒体 visual
算出値 各 値が[ 左上原点からの,[ 横, 縦 ]offset によるペア ]であるような,値のリスト。 この offset は,[ 絶対長と百分率 ]の組み合わせとして与えられます。
アニメーション 長さ, 百分率, または calc 式 からなる 単純リスト の 繰り返し可能なリスト として使用可能

このプロパティは、複数の背景画像が指定されていたら,各画像の初期位置を指定します。
指定された値が1個の場合は2番目の値は center と見なされます2 個の値が与えられた場合は最初の値は、横の位置を表現します。 %やpxで指定された値は左上が起点になります。

注記: キーワードによるペアは順不同である一方、キーワードと[ 長さ/百分率 ]の組み合わせでは,順序は入れ替えられません。 したがって、 center left は妥当であるが, 50% left は無効になります。

3 〜 4 個の値が与えられた場合には、その中の各[<percentage>/<length>]は offset(基準点からの差(距離)) を表現し,その起点となる辺を指定するキーワードが先行していなければなりません。 例えば background-position: bottom 10px right 20px は、[[ 下辺から上へ 10px ] [ 右辺から左へ 20px ]]offset された所を表現します。 値が 3 個の場合の未指定の offset は、ゼロと見なされます。

値の[ 正/負 ]は、背景位置決め区画の辺から[ 内方/外方 ]への offset を表現します。

次の宣言は、左上隅からの[ 横, 縦 ]offset を明示的に与えます:

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

値のパーセント表示

百分率値による[ 横/縦 ]offset は、[ 背景位置決め区画の[ 横幅/縦幅 ]から 背景画像の[ 横幅/縦幅 ]を引いた結果 ]に相対的になります。 この画像サイズは background-size にて与えられます。

background2例えば、値ペア 0% 0% に対しては、画像の左上隅が,通例は( background-origin を特に指定しない限り)ボックスのパディング辺による区画の左上隅に揃えられます。 値ペア 100% 100% に対しては、画像の右下隅が,区画の右下隅に揃えられます。 値ペア 75% 50% に対しては、画像の左上隅から 75% 右, 50% 下の地点 が,区画の左上隅から 75% 右, 50% 下の地点に揃えられます。
0%は画像の四角形の0%と外枠の0%が重なり、50%なら画像の四角形の50%位置と外枠の50%位置が重なる70%なら画像の四角形の50%位置と外枠の70%位置が重なるという挙動がポイントです。

要素内の画像位置を示す図式 background-position: 75% 50% の意味を表すサンプル

値の長さ指定

長さ値は、固定の長さによる offset 与える。 例えば,値ペア 2cm 1cm に対しては、画像は,その左上隅が,背景位置決め区画の左上隅から[ 2cm 右, 1cm 下 ]の所に位置するように置かれます。

値のキーワード指定

top
1 〜 2 個の値が与えられた下では、縦位置に対する 0% に算出される。 他の場合、その次の offset 値の起点を上辺にする。
right

1 〜 2 個の値が与えられた下では、横位置に対する 100% に算出される。 他の場合、その次の offset 値の起点を右辺にする。

bottom

1 〜 2 個の値が与えられた下では、縦位置に対する 100% に算出される。 他の場合、その次の offset 値の起点を下辺にする。

left

1 〜 2 個の値が与えられた下では、横位置に対する 0% に算出される。 他の場合、その次の offset 値の起点を左辺にする。

center

横位置が指定されていなければ,横位置に対する 50% (すなわち left 50% )に算出され、他の場合は,縦位置に対する 50% (すなわち top 50% )に算出される。

下の一連の background 簡略形宣言は、各種キーワードを利用して, background-position に百分率による値を明示的に設定されます。

background-position: right top /* 100% 0% */
background-position: top center /* 50% 0% */
background-position: center /* 50% 50% */
background-position: bottom /* 50% 100% */

下の例では、画像は,(繰り返されずに)表示域の右下隅に寄せられます。

背景位置を、左上でない隅から相対的にすることもできる。 例えば,次のものは、背景画像を[ 下端から 10px, 右端から 3em ]の所に設置します。

background-clip プロパティ

名前 background-clip

値 <box>[ ,<box>]*

初期値 border-box

適用対象 すべての要素

継承 されない

百分率 利用不可

媒体 visual

算出値 指定値

アニメーション 不可

背景が塗られる区画となる 背景塗り区画 を決定します。
値の構文は次で与えられる:
<box>= border-box | padding-box | content-box

background-clipは背景の適用範囲を指定するプロパティです。ボーダー領域から表示をするか、パディング領域から表示をするか、コンテント部分から表示するか決めることができます。

各種 値は次の意味を持ちます。:

border-box

背景はボーダーボックス内に塗られます。

padding-box

背景はパディングボックス内に塗られます。

content-box

背景は内容ボックス内に塗られます。

(いずれも、ボックスの外側は切り取られます。)

注記: ルート要素については、異なる背景塗り区画を持つので, background-clip プロパティの効果は出ません。

注記: 背景は常に、ボーダー(もしあれば)の 背後 に描かれます。

background-origin プロパティ

名前 background-origin

<box>[ ,<box>]*
初期値 padding-box
適用対象 すべての要素
継承 されない
百分率 利用不可
媒体 visual
算出値 指定値
アニメーション 不可

CSS Backgrounds and Borders Module Level 3 日本語訳では
単独のボックスとして描画される要素に対しては、その 背景位置決め区画 を指定します。 複数のボックスとして描画される要素(例えば,複数行に渡るときの各 行の行内ボックスや, 複数ページに渡るときの各 ページのボックス)に対しては、 box-decoration-break [CSS3-BREAK] が,対象になるボックスを指定し,それらの背景位置決め区画を決定します。

CSS Backgrounds and Borders Module Level 3 の説明では何をいっているかよくわかりませんが、ポイントは背景画像表示のbackground-positionの原点を決めるものです。その原点をボーダーを含んだ所にするか、パディングを含んだ場所にするか、コンテントの開始部分にするかを決めるものです。background-clipとの違いはbackground-positionの原点を決めるもので例えばcontent-boxの場合コンテントから画像が始まりますがパディング部分もボーダー部分も背景画像は表示されます。background-clipの場合はcontent-boxの場合にはパディング部分とボーダー部分に画像が表示されません。background-clipとの違いをサンプルでよく確認してください。

padding-box

画像位置をパディングボックスに相対的にする(ボックスが 1 つだけなら,[ 0 0 / 100% 100% ]がパディング辺の[ 左上隅/右下隅 ]に対応する)。

border-box

画像位置をボーダーボックスに相対的にする。

content-box

画像位置を内容ボックスに相対的にする。

この画像層に対応する[ background-attachment の層値 ]が fixed の場合、このプロパティは効果を持たず,背景位置決め区画は 初期包含ブロック [CSS21] になる。

注記: [ background-clip が padding-box, background-origin が border-box, background-position が top left (初期値) ]で, 要素のボーダー線幅が非ゼロの場合、背景画像の[ 上側, 左側 ]の部分が切り取られることになります。

background-size プロパティ

名前 background-size

値<bg-size>[ ,<bg-size>]*

初期値 auto

適用対象 すべての要素

継承 されない

百分率

媒体 visual

算出値 指定に従う。 ただし,長さは絶対化され,省略された auto キーワードは補填される。

アニメーション 長さ, 百分率, または calc 式 からなる 単純リスト の 繰り返し可能なリスト として
( 従って、キーワード値はアニメート可能でないことになります。 )

複数の背景画像のサイズを指定することができます。
<bg-size>= [<length>|<percentage>| auto ]{1,2} | cover | contain
これらの値は次の意味を持ちます。

contain
画像を — その内在縦横比があればそれを維持しつつ — その横幅と縦幅の両者とも背景位置決め区画を覆い切るような,最小サイズに拡縮します。
cover
画像を — その内在縦横比があれば, それを維持しつつ — その横幅と縦幅の両者とも背景位置決め区画に収まり切るような,最大サイズに拡縮します。
[<length>|<percentage>| auto ]{1,2}
2 値のうち最初の値が 画像の横幅を与え2番目の値が縦幅を与えます。 成分値が 1 個だけ与えられた場合2番目の成分は auto に見なされます。
百分率は、背景位置決め区画に相対的になります。
一方の次元のみ auto 値の場合、画像の内在縦横比と他方の次元のサイズを用いて解決されますが、それができない場合は100% と見なされます。
2 値とも auto 値の場合、画像の内在[ 横幅または縦幅 ]があれば,それが利用されるべきであり、未指定の次元があれば,前段落の auto と同様にふるまいますが、画像が内在[ 横幅, 縦幅 ]いずれも持たない場合のサイズは、 contain と同様に決定されます。
【 このサイズは、[ 指定サイズ ← 与えられたサイズ; 既定のオブジェクトサイズ ← 背景位置決め区画 ]の下で,既定のサイズ法アルゴリズムを利用して解決されます。 】
どの成分値にも,負の値は許容されません。

containは、背景画像が表示するBOXと同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。つまりcontainは要素の大きさ内で一杯に背景画像を表示しようとしますが、ある一定の大きさになると表示されない部分が出てきます。
一方coverは、背景画像が表示するBOXと同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。表示するBOXに背景画像が常にある形でフィットします。coverはいわゆる要素をカバーするものです。できるだけ一杯に背景画像を表示しようとしますが、全ての背景画像を表示できない可能性もあります。

背景画像が内容区画を覆い切るように,各次元について独立に画像を伸張します

2個の複製が縦方向にちょうど収まるように,画像が伸張されます。 縦横比は維持されます

背景画像が縦横とも 15px 幅になる様に強制します

画像の内在サイズを利用します。 CSS Level 2 までは、このふるまいのみが可能です。

画像の縦幅が,指定値の 30% から — ちょうど整数枚の画像が収まるように — 33.3% に切り上げられる。 30% のままだと、 3 枚の画像に加えて, 4 枚目の画像も部分的に現れることになります。 横幅については、背景区画の横幅の 20% になりますので,この切り上げは生じません。

片方または両方の次元において, background-repeat が round の場合、 UA は更に,それらの次元において,上述による結果の画像サイズを次のように調整しなければなりません:

当該の次元において、背景位置決め区画を整数枚の画像で埋め尽くせる様に,拡縮します — L を調整前の横幅(または縦幅)( ≠ 0 ), W を 背景位置決め区画の横幅(または縦幅)とするとき、調整後の結果は,次の式で与えられます:

W ÷ [[ W ÷ L ]に最も近い正整数 ]

加えて、[ 片方の次元では background-repeat が round ], かつ[ 他方の次元では background-size が auto ]の場合、画像を元の縦横比に戻すように,他方の次元について拡縮します。

背景画像は、その内在サイズで示されます

背景画像は、横幅は 3em に, 縦幅は元の縦横比が保たれるように拡縮されます

背景画像の横幅は,背景の横幅を整数枚で埋め尽くせる様に, 3em なるべくに近いサイズに拡縮され、縦幅は,元の縦横比が保たれるように拡縮されます

横幅が 3em に,縦幅は[ 背景の縦幅を整数枚で埋め尽くしつつ, 元の縦横比を保つ縦幅になるべく近い ]サイズに拡縮されます

背景画像は、縦幅は[ 背景の縦幅を整数枚で埋め尽くしつつ, 4em になるべく近い ]サイズに,横幅は[ 背景の横幅を整数枚で埋め尽くしつつ, [ 縦幅 4em と元の縦横比から得られる横幅 ]になるべく近い ]サイズに拡縮されます

背景画像の横幅または縦幅がゼロに解決される場合、その画像は表示されなくなります(その効果は、画像が透明であったときと同じになります)。
こちらのページも参考にしてください。

background プロパティ

名前 background
値 [ <bg-layer>, ]*<final-bg-layer>
初期値 個々のプロパティを参考
適用対象 すべての要素
継承 されない
百分率 個々のプロパティを参考
媒体 visual
算出値 個々のプロパティを見よ
アニメーション 個々のプロパティを参考

background プロパティは、スタイルシートにおける同じ場所で大多数の background-* プロパティをまとめて設定するための簡略形です。 コンマ区切りの各背景画像に対応し,その個数が層の枚数を定めます。
各背景画像に対して次の各種プロパティ[ background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment ]の対応する値を、それらの初期値に設定した上で,宣言の層値の中に[ これらのプロパティに対し明示的に指定されている成分値 ]があればそれをあてがいます。

ここで、層値の中の 2 個の<box>値は,順に[ background-origin, background-clip ]に対応します。 ただし、供された<box>値が 1 個だけの場合,その値を 2 番目の値にも利用します。

background-color には、<background-color>が指定されていれば その色を使用して,他の場合は初期値をあてがいます。

次の例の中の最初の規則では、 background-color にのみ値( red )が与えられているので、他の各種プロパティは,それらの初期値に設定されます。 2 番目の規則では、多数のプロパティが指定されています:サンプル
*firefox31.0はroundに対応していません。

最初の規則は、次と等価になります:サンプル
*firefox31.0はroundに対応していません。

2 番目の規則は、次と等価になります:

次の例は、 背景色( #CCC )と 背景画像( url(metal.jpg) ) を設定する。 画像は要素の横幅全体にきっちり収まる様に拡縮されます。

等価性を示す別の例:

コンマ区切りによる複数の層値からなる宣言:

上の宣言は、次と等価になります:

特別な要素の背景

ルート要素の背景は, キャンバスの背景になり、その背景塗り区画はキャンバス全体を覆うように拡張されます。すなわち、背景は,背景位置決め区画の外側で切り取られません。— どの画像も,それらがルート要素単独に塗られたかのように、相対的にサイズされ位置されます(言い換えれば、背景位置決め区画は,ルート要素に対するときと同様に決定されます)。 ルート要素に対する background-color 値が transparent の場合の,キャンバスの背景色は、 UA 依存になる。 ルート要素がこの背景を塗り直すことはありません。すなわち,その背景の使用値は、 transparent になります。

ルート要素が[ HTML HTML [HTML401] / XHTML html [XHTML11] ]要素である文書に対しては: ルート要素上の[ background-image の算出値が none で, background-color の算出値が transparent ]の場合、 UA は,各種 background-* プロパティの算出値を継承させる際には,ルート要素の子である最初の[ HTML BODY / XHTML body ]要素から伝播させなければなりません。
BODY 要素上の background-* プロパティの使用値は、それらの初期値であり、伝播される値は,それらがルート要素上に指定されたかのように扱われます。 HTML 文書の作者には、キャンバスに背景を指定する際には, HTML 要素ではなく, BODY 要素に指定することが推奨されます。

backgroundプロパティをちゃんと知りたいはこちら