background-position

解説

背景画像の表示開始位置を指定します。当プロパティはインライン要素(置換インライン要素は別)に指定をしても意味が無いので注意が必要です。左右の位置、上下の位置をパーセント値、長さの指定、またはキーワードにて指定します。長さで指定する場合は最初の数値がボックスの左端から画像の左端の長さ、次の数値がボックスの上端から画像の上端の長さとなります。パーセント値で指定する場合はボックスの左上端からの割合と画像の左上端からの割合を合わせます。例えば「0% 0%」の指定ではボックスの左上に画像の左上を合わせ、「100% 100%」の指定でボックスの右下に画像の右下を合わせます。「50% 50%」の指定ではボックスの真ん中に画像の真ん中を合わせます。「30% 70%」と指定するとボックスの上から30%、左から70%の点に、画像の上から30%、左から70% の点が重ねられます。長さで指定する場合とは違い画像の左上端の位置を指定するわけでは無いので注意が必要です。

その他にも割合をキーワードにて指定することもできます。上下位置を指定するキーワードとして「top,center,bottom」がありますがこれらはそれぞれ「0%,50%,100%」と同じ意味です。同様に「left,center,right」で左右位置の「0%,50%,100%」と同様の指定を行うことができます。

「50px 50%」のように長さとパーセント値を組み合わせて使うことはできますが、長さとキーワード、パーセント値とキーワードを指定することはできません。長さやパーセント値が一つだけ指定された場合は左右位置の指定となり、上下位置は 50% とみなされます。長さやパーセント値に負の値を指定することもできます。

プロパティ情報

値:パーセンテージまたは長さを1つか2つ指定(1つ指定した際は左右位置の指定となり、上下位置は50%となる。2つ指定する際には半角スペースで区切り、左右位置、上下位置の順で指定する。)します。もしくは left,center,rightの中からいずれか1つと、top,center,bottomの中からいずれか1つを順不同で1つか2つ指定します。キーワードと数値は同時に指定できないので注意が必要です。
初期値:0% 0%
適用対象:ブロック要素と置換要素
継承:しない
パーセンテージ:適用対象と画像自身のサイズに対する割合
適用メディア:視覚
レベル:1〜2

参照

使用例

ソース

CSSの記述方法はスタイルシートってなに?も参照下さい。

p.sample {
	background-image    : url("../img/smp.gif");
	background-repeat   : no-repeat;
	background-position : 50% 30%;
}
HTMLの記述方法

<p class="sample">
インライン要素には適用できないので注意して下さい。
</p>

表示結果

インライン要素には適用できないので注意して下さい。