background-positionプロパティは background-imageプロパティで背景画像を表示する場合に、背景領域内で画像がタイル状に繰り返し表示される初期位置を指定します。背景画像の繰り返し方法は background-repeatプロパティでコントロールすることができます。
値は "em", "px" などの単位識別子を伴う数値の長さやパーセンテージ値による割合、または以下の固有のキーワードで背景画像を表示する左右方向と上下方向の初期位置を左右方向・上下方向の順に半角スペースで区切って指定します。ただし、長さやパーセンテージ値の数値による指定とキーワードによる指定の組み合わせは避けましょう。CSS2.1 では数値とキーワードの組み合わせも許可されているのですが、CSS2.0 に適合する UA では数値とキーワードを組み合わせた指定は無効なものとして解釈します(長さとパーセンテージ値の組み合わせは問題ありません)。また、長さとパーセンテージ値の数値には負の値を指定することもできます。
0%と等価)で配置します100%と等価)で配置します50%と等価)に配置します0%と等価)で配置します100%と等価)で配置します値にひとつの数値、またはキーワードしか記述しなかった場合、その値は左右方向の配置に適用され、上下方向には自動的に "50%" の値が適用されます。なお、背景領域とは通常はボーダー(枠線)の領域まで(内容領域+パディング+ボーダー)を指すのですが、html要素とその第一の子要素である body要素といったルート部については、例外的にmarginプロパティの値を含む領域まで(内容領域+パディング+ボーダー+マージン)を背景領域として計測します。また、結合ボーダーモデルのセル(border-collapse : collapse ;)についてはパディング領域まで(内容領域+パディング)が背景領域となります。
長さで指定する場合、画像と背景領域ともに左上が基点(0,0)であり、そこから画像の左上端をどれぐらい離すかを指定します。パーセンテージ値で指定する場合、参照する基準値は背景領域の幅であり、背景画像のサイズに対する割合で指定します。ただし、background-attachmentプロパティで背景画像が表示域に対して固定されている(background-attachment : fixed ;)場合は画像位置は表示域に基づきます。
.airplane {
background-color : transparent ;
background-image : url(image.gif) ;
background-repeat : no-repeat ;
background-position : center ;
text-align : center ;
}
background-positionプロパティを使えば、見出しのアクセントに余白になっている右側に背景画像を表示したりと効果的なデザインが可能になります。大きな1枚の背景画像を固定表示させたい場合にも background-attachmentプロパティを使うのではなく、"background-repeat : no-repeat ;" を指定した上で、background-positionプロパティにその背景画像を表示したい位置を指定するだけで可能です。