background設定解説〜CSS3

backgroundプロパティ〜CSS3

backgroundプロパティ〜CSS3

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

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

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

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

background-image: url(cow.png), url(cat.png), url(dog.png);
background-position: center center, 30% 70%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

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

background-image: url(cow.png), url(cat.png), url(dog.png);
background-position: center center, 30% 70%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

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

＊＊ 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形式のものも使用可能です。

body { background-image: url("rect.svg") }
p { background-image: none }
div { background-image: url(cow.png), url(cat.png), url(dog.png); }

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 枚の背景画像が中央寄せにされ, その上下に複製が繰り返されて，要素の背後に縦方向の帯を作ります。

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

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: 背景は，要素内で固定され、その内容と伴にはスクロールしませんが、ページ単位では要素と共にスクロールします。