背景位置(Background Position)

background-positionとは、背景画像の表示位置を指定するためのプロパティです。

横方向と縦方向それぞれについての値を順にスペースで区切って指定します。

初期値は0% 0%で、パディング領域の左上隅を起点に描画されます。

値が一つだけだった場合には横方向への指定として解釈され、縦方向の値には50%が用いられます。

値には実数値と単位の組み合わせのほかにleftやtopなどのキーワードを用いることもできますが、両者を組み合わせて指定することはできません。

Functional list
書式 background-position: <value:値>
[<percentage> |<length>]{1,2}
| [top | center | bottom] || [left | center | right]
初期値 0% 0%
適用要素 ブロック−レベルとそれに代る要素
継承性 不可

background-positionプロパティーは、特定されたbackground imageの初期の位置を与えます。

プロパティーはブロック−レベル要素とそれに代る要素にだけ適用されます(おき代えられる要素は内部次元のみが知っているものの一つです:HTMLでおき代えられる要素には IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTがあります)。

背景位置を割り当てる一番やさしい方法は、キーワードです:

  • 水平キーワード( left・ center・ right)
  • 垂直キーワード( top・ center・ bottom)

Percentageslengthsも、背景画像の位置を割り当てるのに使われます。

パーセンテージは要素のサイズに対して相対的なものです。

長さも許されますが、これらは異なる画面解像度の取り扱いの際継承性が弱いので推奨できません。

パーセンテージや長さを使う場合水平方向の位置が真っ先に特定され、続いて垂直方向の位置がとくていされます。

 20% 65%といった値は、画像の20%以上65%以下の点が要素の20%以上65%以下の点に置かれることを特定します。

 5px 10pxといった値は、画像の左上角が要素の右から5ピクセルそして上左から10ピクセル下に配置されることを特定します。

水平方向の値のみがあたえられた場合垂直位置は50%になります。

長さとパーセンテーギの組み合わせはマイナス位置であるようにできます。

例えば、10%-2cmは許されます。

しかし、パーセンテージと長さはキーワードと組み合わすことはできません。

キーワードはいかの様に解釈されます:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

背景画像はキャンバス画面に対して固定(fixed)されている場合画像は要素にでなくキャンバス画面に相対的に配置されます。

制作者は短縮型であるbackgroundプロパティーも使え、これは現在ではbackground-positionプロパティーよりよくサポートされています。

サンプル

戻る