background-positionプロパティ

background-positionプロパティの概要
機能	背景画像の配置位置を定義
指定可能な値	パーセント, 長さ, [ top, center, bottom ], [ left, center, right ]
初期値	0% 0%
継承	しない
適用可能なボックス	全て

background-positionプロパティを使用すると、背景画像の表示位置を指定することができます。

値を1つだけ指定した場合は水平方向の指定で、2つ指定した場合は、1つ目の値が水平方向、2つ目の値が垂直方向を表します。値の単位には「px」が最もよく使用されますが、「mm」や「cm」、「pt」等も使用できます。

background、あるいは、background-repeatプロパティでno-repeat、repeat-xまたは、repeat-yが指定されていなければ、このプロパティを指定しても意味はありません。

入力例に使用した画像

水平方向への移動

右へ50px移動させています。

no-repeatか、repeat-yが指定されていなければ機能しません。


body {
    background-image: url(back_h.gif);
    background-repeat: repeat-y;
    background-position: 50px;
}

下へ50px移動させています。

no-repeatか、repeat-xが指定されていなければ機能しません。


body {
    background-image: url(back_h.gif);
    background-repeat: repeat-x;
    background-position: 0px 50px;
}

50%と50%を指定すると、要素の中央に表示させることになります。centerとcenterを指定しても同様です。


body {
    background-image: url(back_h.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}