“background-position”プロパティ:背景画像の表示位置

概要

“background-position”プロパティは“background-image”プロパティで指定された背景画像の表示位置を指定するプロパティです。

既定ではその要素のパディング・ボックスが背景画像の表示位置の基準となりますが、“background-origin”プロパティによって変更することができます。

サンプルコード

値

値の指定方法

“<bg-position>”値は“left”、“center”、“right”、“top”、“bottom”と“<length-percentage>”値を1個から4個組み合わせて位置を表します。

値を1つ指定する場合

値が“left”または“right”の場合、その値は水平方向の表示位置を指定します。垂直方向の表示位置は“center”とみなされます。

値が“top”または“bottom”の場合、その値は垂直方向の表示位置を指定します。水平方向の表示位置は“center”とみなされます。

値が“center”の場合は水平方向と垂直方向の両方の表示位置を指定します。

値を“<length-percentage>”値で指定した場合はその値は水平方向の表示位置を指定します。垂直方向の表示位置は“center”となり、要素の中央に寄せて表示されます。

値を2つ指定する場合

値を2つ指定する場合には一方の値が水平方向の表示位置、もう一方の値が垂直方向の表示位置を指定します。どちらの値がどの方向に対応するかは値の組み合わせによって異なります。

一つ目の値が“left”もしくは“right”の場合、1つ目の値は水平方向の表示位置を表し、2つ目の値は垂直方向の表示位置を表します。2つ目の値には“top”、“bottom”、“center”、もしくは“<length-percentage>”値を指定できます。

一つ目の値が“top”もしくは“bottom”の場合、1つ目の値は垂直方向の表示位置を表し、2つ目の値は水平方向の表示位置を表します。2つ目の値には“left”、“right”、“center”、もしくは“<length-percentage>”値を指定できます。

一つ目の値が“center”の場合には二つ目の値に“top”、“bottom”、“left”、“right”、“center”、“<length-percentage>”値のいずれも指定できます。

二つ目の値が“top”もしくは“bottom”の場合は“center”は水平方向の表示位置、二つ目の値が垂直方向の表示位置を表します。

二つ目の値が“left”、“right、“center”、もしくは“<length-percentage>”値の場合は“center”は垂直方向の表示位置、二つ目の値が水平方向の表示位置を表します。

一つ目の値が“<length-percentage>”値の場合にも二つ目の値に“top”、“bottom”、“left”、“right”、“center”、“<length-percentage>”値のいずれも指定できます。

二つ目の値が“top”もしくは“bottom”、もしくは“<length-percentage>”値の場合は一つ目の値は水平方向の表示位置、二つ目の値が垂直方向の表示位置を表します。

二つ目の値が“left”、“right、“center”の場合は一つ目の値は垂直方向の表示位置、二つ目の値が水平方向の表示位置を表します。

値を3つ、もしくは4つ指定する場合

“top”もしくは“bottom”、“left”もしくは“right”に“<length-percentage>”値を組み合わせるとキーワード値からのオフセット距離を指定することができます。

“<length-percentage>”値は、正の値はキーワード値で指定した端から内側へ向けての距離、負の値はキーワード値で指定した端から外側へ向けての距離を表します。

値が3つの場合、そのうち2つの値はキーワード値とオフセット距離の組、残り1つの値は最初の値の組が表さない方向のキーワード値です。

“top”もしくは“bottom”と“<length-percentage>”値を組わせた場合、残り一つの値は“left”、“right”もしくは“center”です。

“left”もしくは“right”と“<length-percentage>”値を組わせた場合、残り一つの値は“top”、“bottom”もしくは“center”です。

値が4つの場合、キーワード値とオフセット距離の組が2組です。

1組は垂直方向の表示位置を表す“top”もしくは“bottom”と“<length-percentage>”値の組み合わせ、もう1組は水平方向の表示位置を表す“left”もしくは“right”と“<length-percentage>”値の組み合わせを指定します。

値は入れ替えることができますが、オフセット距離はその基準となるキーワード値の次の値として記述する必要があります。

複数の背景画像がある場合

“background-image”プロパティで複数の背景画像が指定されている場合、値のセットをコンマ(“,”)で区切って記述することでそれぞれの背景画像の表示位置を指定することができます。値の順番は“background-image”プロパティで指定した値の順番に対応します。

表示位置の基準となる座標

キーワード値で指定する場合

値が“left”の場合は背景画像の左端が要素のパディングの左端に、“right”の場合は背景画像の右端が要素のパディングの右端に合わせて表示されます。

値が“top”の場合は背景画像の上端が要素のパディングの上端に、“bottom”の場合は背景画像の下端が要素のパディングの下端に合わせて表示されます。

値が“center”の場合は背景画像の中央が要素の中央に合わせて表示されます。

“<length>”値で指定する場合

値を“<length>”値で指定する場合、要素のパディングの左上を原点として背景画像の左上の座標で表示位置を指定します。

“<percentage>”値で指定する場合

値を“<percentage>”値で指定する場合、要素のパディングの左上を原点として要素のパディングの大きさに対する割合で背景画像の位置を指定します。この時、背景画像内の基準点も背景画像の左上から背景画像の大きさに対する割合で決まります。

右もしくは下を基準にして指定する

“right”もしくは“bottom”に“<length>”値もしくは“<percentage>”値のオフセット距離を組み合わせると、右もしくは下を基準にして背景画像の位置を指定することができます。

仕様書

定義されている仕様書

background-position

<percentage>
<length>
top
center
bottom
left
right

キーワード値で指定する

div {

background-repeat: no-repeat;
background-position: center;

}

div {

background-repeat: no-repeat;
background-position: right;

}

div {

background-repeat: no-repeat;
background-position: bottom;

}

div {

background-repeat: no-repeat;
background-position: bottom right;

}

“<length>”値で指定する

div {

background-repeat: no-repeat;
background-position: 75px;

}

div {

background-repeat: no-repeat;
background-position: 25px 75px;

}

“<percentage>”値で指定する

div {

background-repeat: no-repeat;
background-position: 25%;

}

div {

background-repeat: no-repeat;
background-position: 45% 80%;

}

右や下からの座標で指定する

div {

background-repeat: no-repeat;
background-position: bottom 50px right 25px;

}

div {

background-repeat: no-repeat;
background-position: bottom 50px left 25px;

}

複数の背景画像を指定する

div {

background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: no-repeat, no-repeat;
background-position: 10% 20%, 30% 40%;

}