初心者のスタイルシート(CSS)講座:背景画像の縦横位置

・background-position-x(または、y)
 背景画像の横、または縦方向に指定する

【背景画像の縦・横方向に指定する方法】 background-position-x:横方向
background-position-x:縦方向

【サイズを表す数値+単位】
ボックス領域の左上を基準点として、横方向からの位置(左からの距離)をbackground-position-xで、縦方向からの位置(上からの距離)をbackground-position-yで指定します。

【数値+%】
 画像の位置をボックス領域の幅、または高さに対する割合で指定します。左上を基準点として、指定する点は同じです。
 でも、パーセントによる指定は値の解釈が異なり、ボックス領域の位置の割合と画像の位置の割合が揃います。

【キーワード】
top・・・・・・上
center・・・・・中央
bottom・・・・・下
left・・・・・・左
right・・・・・右
横方向の位置を指定する場合はleft、center、rightをbackground-position-xに指定します。縦方向の位置を指定する場合はtop、center、bottomをbackground-position-yに指定します。