関連プロパティ

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-position-x
  background-position-y
• play-during

background

'background-color'、'background-image'、'background-repeat'、'background-attachment'、'background-position'を一ヶ所で指定する簡略化プロパティです。

書き方は、各プロパティの値を半角スペースで区切って並べるだけです。順序は任意で、各値は省略可能です。

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

指定しない値は、すべて初期値が用いられます。"background: url("kanadarai.jpg") 50px"という宣言では、'background-color'、'background-repeat'、'background-attachment'の値が書かれていませんので、初期値が用いられます。つまり、"background: transparent url("kanadarai.jpg") 50px repeat scroll"となります。

例えば、以下のように指定すると、
body {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background: url("kanadarai.jpg") 50px;
}
以下と等価になり、上の2つの宣言が無駄になります。
body {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background: transparent url("kanadarai.jpg") 50px repeat scroll;
}

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

注意点

1. 指定しない値は、すべて初期値が用いられます。
2. 背景と前景の組み合わせで、文字が見えづらくならないように気を付けましょう。
3. 背景画像を指定する時には、なるべく背景色も同時に指定しておきましょう。
4. UAは[fixed]を[scroll]として扱っても良い事になっています。
5. CSSでの基準のディレクトリは、ソース文書のディレクトリでは無くスタイルシート自身のディレクトリとなります。

問題点

1. "background-attachment: fixed"のページ媒体での処理方法が記載されていません。