background-position
Updated / Published
background-positionプロパティは background-imageプロパティで背景画像を表示する場合に、背景領域内で画像がタイル状に繰り返し表示される初期位置を指定します。背景画像の繰り返し方法は background-repeatプロパティでコントロールすることができます。繰り返しが制限（background-repeatプロパティでrepeat以外の値が指定）されている方向のボーダー領域には背景色は反映されますが、背景画像は描画されません。
値は "em", "px" などの単位識別子を伴う数値の長さやパーセンテージ値による割合、または以下の固有のキーワードで背景画像を表示する左右方向と上下方向の初期位置を左右方向・上下方向の順に半角スペースで区切って指定します。長さとパーセンテージ値の数値には負の値を指定することもできます。
値にひとつの数値（長さ、パーセンテージ値）、またはキーワードしか記述しなかった場合、その値は左右方向の配置に適用され、上下方向には自動的に "center" の値が適用されます。
長さで指定する場合、パディングボックスの左上が基点（0,0）であり、そこから画像の左上端をどれぐらい離すかを指定します。
パーセンテージ値で指定する場合、参照する基準値はパディングボックスと画像自身のサイズに対する割合で指定します。ただし、background-attachmentプロパティで背景画像が表示域に対して固定されている（background-attachment : fixed ;）場合は画像位置は表示域に基づきます。
background-positionプロパティのキーワード
- left
- 左右方向の指定のみ可能で左揃え（
0%と等価）で配置します - right
- 左右方向の指定のみ可能で右揃え（
100%と等価）で配置します - center
- 左右方向・上下方向の両方に指定可能で中央（
50%と等価）に配置します - top
- 上下方向の指定のみ可能で上揃え（
0%と等価）で配置します - bottom
- 上下方向の指定のみ可能で下揃え（
100%と等価）で配置します
キーワードの場合のみ、top ceterをcenter topのように横方向・縦方向の順序を入れ替えてもCSS2.1に適合するUAであれば解釈してくれますが、次のCSS3仕様ではキーワードについての順番も必ず左右方向・上下方向の順にするように制限が加えられているのでCSS3適合UAのために指定の順序はあわせるようにしておきましょう。
また、CSS2.1仕様から数値とキーワードの組み合わせが許可されるようになりました。left 25%や1em bottomといった指定も可能です（現在ではほぼ皆無ですがNetscapeなどCSS2.0 仕様に適合するような古いUA では数値とキーワードを組み合わせた指定は無効なものとして解釈します。長さとパーセンテージ値の組み合わせは問題ありません）。
background-positionプロパティの実装状況
- IE
- ◯：IE6, IE7ではボーダー領域が存在する場合にボーダー領域を含めてボーダーボックスを基点にするのでボーダー領域分ずれることになる
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯
- iOS
- ◯
- Android
- ◯
IE6, IE7はボーダー領域を含めたボックスの左上を背景画像の描画の基点にした振る舞いをするので、ボーダー領域が1px以上存在する場合はそのボーダーの太さ分背景画像の指定位置がずれることになります。IE8では正常にパディングボックスの領域で振る舞います。
サンプル
h2 {
background-color : transparent ;
background-image : url(h2bg.gif) ;
background-repeat : no-repeat ;
background-position : right center ;
padding-right:100px;
}background-positionプロパティを使えば、見出しのアクセントに余白になっている右側に背景画像を表示したりと効果的なデザインが可能になります。
また、大きな1枚の背景画像を固定表示させたい場合にも "background-repeat : no-repeat ;" を指定した上で、background-positionプロパティにその背景画像を表示したい位置を指定することで実現できます。