初心者のスタイルシート(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に指定します。