関連プロパティ

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

background-position

背景画像の初期位置を指定します。インライン要素には効果がありません。

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

ルート要素に指定した場合は、外辺で考えます。

"0% 0%"の値の対で画像の上左端を要素のパディング辺の上左端に、"100% 100%"の値の対で画像の下右端を要素のパディング辺の下右端に、"14% 84%"の値の対で画像の右から14%上から84%の点を要素の右から14%上から84%の点に設定します。

"2cm 2cm"の値の対では、画像の上左端を要素の上左端から右2cm下2cmに設定します。パーセンテージとの違いに気を付けてください。

※上の例は、96ppiの場合です。

値が一つだけの場合は、それを水平方向に適用して、垂直方向は50%と解釈されます。

キーワードはパーセンテージや長さと組み合わせては使用出来ません。"50% 2cm"のような、長さとパーセンテージの組み合わせは可能です。

背景画像がウィンドウに対して固定されている場合('background-attachment'参照)、画像は要素では無くウィンドウと相対的な位置に設定されます。例えば、
body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
}
とした場合は、背景画像はウィンドウの下右端に固定されます。

'background-repeat'を用いて繰り返し方法を、'background-attachment'を用いて画像をウィンドウに対して固定するか否かを指定出来ます。'background'を用いてこれらを一括指定する事も可能です。

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

CSS1とCSS2の相違点

1. CSS1ではパディング辺では無く内容辺を参照しました。