関連プロパティ

background-attachment

対応状況
N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
○	○	○	○	○	○	○	○	○

背景画像をウィンドウに対して固定するか、文書に伴ってスクロールするかを指定します。従って、背景画像が設定されていないと無意味です。

順序としては、背景色の上に背景画像、その上に内容となります。ですので、背景画像が透過になっている部分、又は適用されない部分からは背景色が見えます。

'background-repeat'を用いて背景画像の繰り返し方法を、'background-position'を用いて背景画像の初期位置を指定出来ます。'background'を用いてこれらを一括指定する事も可能です。

キーワード解説

scroll: 背景は内容と一緒にスクロールします。
↓ ↓
ピラミッド状に積み上げた文字とスクロールバー、背景画像の位置関係に注目してください。
fixed: 背景は表示領域に対して固定され、スクロールしても、背景は元の位置のままとなります。
↓ ↓
ピラミッド状に積み上げた文字とスクロールバー、背景画像の位置関係に注目してください。

※以上の例は、分かりやすくする為に "background-image: url(ファイル名)"、"background-repeat: no-repeat"、"background-position: 50% 50%"という3つの宣言を併用しています。

基本的に背景はボーダー領域までですが、body要素、html要素といったルート要素に指定すると、例外的に背景は全域(マージン含む)に表示されます。また、結合ボーダーモデルの場合は、セルの背景はパディング領域までとなります。

注意点

問題点