CSSの詳細情報 プロパティ名 background-position 読み方 バックグラウンド・ポジション 初期値 left top 意味 背景画像の表示位置調整 値 キーワード/サイズやパーセント 対象 ブロックレベル要素と置換要素 CSSレベル CSSレベル1 対応ブラウザ Windows MAC 継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

「background-position」プロパティは、背景画像の表示位置を調節するプロパティです。「background-repeat」プロパティによって画像の繰り返し設定がされている、いないに関わらず背景画像は初期の状態では、要素の左上から開始されて表示されますが、この位置を変えることができます。

なお、このプロパティは背景画像を挿入する「background-image」プロパティのサブプロパティなので、「background-image」プロパティも同時に記述されていなければ動作しません。

CSSの書き方にあるように、通常は2つの値を記入しスペースで区切ります。最初の値は「横方向の位置（x座標）」を、後続の値は「縦方向の位置（y座標）」を記入します。値の書き方は、「left top」などキーワードによる指定の他に、「33px 52%」のようにサイズやパーセントで指定することもできます。キーワードによる指定については以下の表を参照してください。

キーワード 表示位置 横方向（x座標） left 画像を要素のパディングに合わせて左寄せ center 画像を要素のパディングに合わせて中央揃え right 画像を要素のパディングに合わせて右寄せ 縦方向（y座標） top 画像を要素のパディングに合わせて上揃え center 画像を要素のパディングに合わせて中央揃え bottom 画像を要素のパディングに合わせて下揃え

※画像はボックス要素のパディングに合わせられる。マージンに画像は表示されない。

キーワードとパーセントによる指定の相関関係は、以下の表のようになります。

キーワード パーセント 横方向（x座標） left 0% center 50% right 100% 縦方向（y座標） top 0% center 50% bottom 100%

値は1つだけ設定することも可能です。キーワードで値を1つ設定した場合、以下の表のように解釈されます。つまり、一方は必ず「center」となります。

キーワードの省略形 解釈 left left center （0% 50%） center center center （50% 50%） right right center （100% 50%） top center top （50% 0%） bottom center bottom （50% 100%）

サイズによる数値で値を1つ設定した場合は「数値 center」と解釈され、数値は横方向を指定していることになります。一方、縦方向はキーワード同様「center」に固定されます。

キーワードで指定した場合に限り、2つのキーワードは書く順序を入れ替えることができます。つまり例えば、「top ceter」と「center top」は同じと解釈されます。