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; }
段落要素にクラス指定で画像の表示位置を設定 サンプル