background-position
CSSの書き方
background-position:値 値 ;
| 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」は同じと解釈されます。
CSS/HTMLサンプル
p.bk1 { background-image:url(../../img/bg_smp.gif); background-position:center center; }
p.bk2 { background-image:url(../../img/bg_smp.gif); background-position:20px; }
段落要素にクラス指定で画像の表示位置を設定 サンプル
