| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 | 値： left，center，right，top，bottom，数値 （長さ，%） 値1： left，center，right，数値（長さ，％）（横方向） 値2： top，center，bottom，数値（長さ，％）（縦方向） 値3： left，center，right（横方向） 値5： top，center，bottom（縦方向） 値4 値6： 数値（長さ，％）（横方向，縦方向） |
| 初 期 値 | 0% 0% |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | ブロックレベル要素と置換要素 |
| 継 承 | しない |
background-positionプロパティ は，（background-size によるサイズ変更後の）背景の配置領域内での初期表示位置を指定します。
上の表に示したとおり，「位置の値」 の指定方法は大きく分けると，次の３通りになります。
このうち，1 の場合は，指定された以外のもう１つの値は center として扱われます。
また，2 の場合は，縦方向と横方向のどちらか一方の指定を省略すると 1 と同形式の指定になります。
ただし，3 の場合は，横方向と縦方向の両方の指定が必要で一方を省略することはできません。 また，オフセットを省略すると 0 として扱われます ので，キーワードを使った 2 の指定と同形式になります。 逆に，キーワードを省略してオフセットのみを指定した場合には，横方向では left，縦方向では top が 適用されます ので，数値を使った 2 の指定と同形式になります。 つまり，値3 と 値4，値5 と 値6 の両ペアで， キーワードかオフセットかのどちらかを省略すると， 2 の指定と同形式になります。
なお，オフセットの値は，キーワードで指定した画像等の境界から「内側への移動」が正 で， 「外側への移動」が負 となっています。
指定できる値のキーワードと数値は，以下のとおりです。
| 方 向 | 値 | 説 明 |
|---|---|---|
| 横方向 | left | 左寄せで表示します。 （要素とボックスの左端を合わせます）
（数値で 0% や 0px などを指定した場合と同じ） |
| center | 中央配置で表示します。 （要素とボックスの中点位置を合わせます）
（数値で 50% を指定した場合と同じ） |
|
| right | 右寄せで表示します。 （要素とボックスの右端を合わせます）
（数値で 100% などを指定した場合と同じ） |
|
| 数値 | 要素のボックスの幅を基準として，百分率（%）や px や em などの単位をつけた数値で基準位置からの距離を指定します。 | |
| 縦方向 | top | 上寄せで表示します。 （要素とボックスの上端を合わせます）
（数値で 0% や 0px などを指定した場合と同じ） |
| center | 中央配置で表示します。 （要素とボックスの中点位置を合わせます）
（数値で 50% を指定した場合と同じ） |
|
| bottom | 下寄せで表示します。 （要素とボックスの下端を合わせます）
（数値で 100% などを指定した場合と同じ） |
|
| 数値 | 要素のボックスの高さを基準とした % をつけた数値や px や em などの単位をつけた数値で基準位置からの距離を指定します。 | |
| 備 考 | 指定位置の基準となるのは，background-originプロパティで指定したボックスです。 数値による指定では，この基準位置からのオフセットで背景ボックスの位置を指定します。 | |
次の例では，background-origin プロパティ は指定がないため，初期値の padding-box になりますので，それに合わせて配置されます。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) no-repeat yellow; background-position: left top; background-size: contain;} div.sample2 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) no-repeat yellow; background-position: right bottom; background-size: contain;} div.sample3 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) no-repeat yellow; background-position: center center; background-size: contain;} --> </style> |
| HTML <body> ～ </body> |
<div class="sample1"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> <br> <div class="sample2"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> <br> <div class="sample3"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> |
| ブラウザー 表示例 |
|---|
| ↓↓↓background-position: left top; （パディングボックスの左上に合わせて配置されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓background-position: right bottom; （パディングボックスの右下に合わせて配置されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓background-position: center center; （パディングボックスの中央に配置されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ |
一般的に、body要素 に背景画像を指定すると，ブラウザーではタイル状に敷き詰めた形で繰り返し背景画像が表示されます。 この表示形態を変更するには，background-repeat，background-position，background-attachment などの CSS プロパティを用います。