background-position

背景画像の表示位置を、数値やパーセントやキーワードで指定します。
指定していない場合は、左上になります。

{ background-position : left-length top-length | left-percentage top-percentage | top | center | bottom }

{ background-position-x : left-length | left-percentage | left | center | right }

{ background-position-y: : top-length | top-percentage | top | center | bottom }

数値で指定

数値で表示位置を指定します。一括で指定すると、左・上からの長さは同じになります。
-値や配置する要素より大きな値の場合、オーバーフローし画像が切れます。

{ background-position : length || left-length | top-length }

パーセントで指定

パーセントで表示位置を指定します。一括で指定すると、上・左からの長さは同じになります。
パーセントの比率は、配置する要素の幅・高さから割り出されます。
0%で配置する要素の左端・上端で（LEFTとTOPと同じ）、50%で中心（CENTERと同じ）、100%で右端・下端（RIGHTとBOTTOMと同じ）になります。
-値や100%以上の値の場合、配置する要素よりオーバーフローし画像が切れます。

{ background-position : left-percentage top-percentage | top-percentage | left-percentage }

キーワードで指定

キーワードで表示位置を指定します。
キーワードは、縦は「top」・「bottom」・「center」。横は「left」・「right」の5つを組み合わせて指定できます。

{ background-position : top | bottom | center | left | right }


background-position: left top	background-position: center top	background-position: right top

background-position: left center	background-position: center	background-position: right center

background-position: left bottom	background-position: center bottom	background-position: right bottom

X方向の指定

X軸横方向の表示位置を指定します。
キーワードは、「left」・「center」・「right」です。

※Netscapeには、対応していません。

{ background-position-x : left-length | top-percentage | left | center | right }


background-position-x: 10px		background-position-x: 80%		background-position-x: right

Y方向の指定

Y軸縦方向の位置位置を指定します。
キーワードは、「top」・「center」・「bottom」です。