スタイルシートで背景画像を操れ！その３　～数値やパーセントで位置を指定する～

背景画像を数値やパーセントで位置指定するには？

　背景画像の位置指定には、「top」や「right」といったキーワードによる指定の他に、「px」等の数値による方法と「%（パーセンテージ）」による指定方法があります。背景画像でロールオーバーを作る場合など、ピクセル単位での調整が必要な場合に活用されます。

＜サンプル１：月から見た地球＞

　３種類の背景画像（星空の背景・月・地球）を同じ枠内で重ねて使用するため、<div>要素を三重に入れ子にした上で、それぞれにクラス属性を設定してあります。

　数値やパーセントによる指定の場合、背景画像を指定する要素の「左上」を起点として、①横方向、②縦方向の順番に数値を並べて記述します。マイナスの値も使用できます。

　なお、背景画像の位置指定以外のプロパティについては割愛します。また、★★★には背景画像へのパスが入ります。

＜サンプル２：真ん中に来た地球と隅に追いやられた月＞

　３種類の背景画像（星空の背景・月・地球）を同じ枠内で重ねて使用するため、<div>要素を三重に入れ子にした上で、それぞれにクラス属性を設定してあります。

　パーセントで縦横50%に指定すると、背景画像を指定した要素の中央に画像が配置されます。

　なお、背景画像の位置指定以外のプロパティについては割愛します。また、★★★には背景画像へのパスが入ります。