背景画像の位置を定義しよう

前のページでは背景画像の繰り返し方を練習しましたが、
このページでは、背景画像の位置を定義する方法を練習しましょう。
前提として、背景画像を繰り返さない定義を施してください。

１．背景画像を、左上に表示（ background-position: left top ）
２．背景画像を、左下に表示（ background-position: left bottom ）
３．背景画像を、右上に表示（ background-position: right top ）
４．背景画像を、右下に表示（ background-position: right bottom ）
５．背景画像を、中央に表示（ background-position: center ）

手ごろな背景画像が無い場合は、下の画像をダウンロードして使用してください。

手順としては、１〜５のボックスは、すべて同じなので、
解説はボックス１のみにさせていただきます。

まず、背景画像の繰り返しをしないために、「 background-repeat 」という属性をつかい、
値を、「 no-repeat 」と定義します。

つぎに、背景画像の表示位置を定義するために、
「 background-position 」という属性に、「 left top 」という値を定義します。

値の書き方が、ちょっと特殊ですが、
背景画像の表示位置を定義するためには、基本的に以下の５つの値をつかっていきます。

top → 背景画像を、上寄りに表示する
right → 背景画像を、右寄りに表示する
bottom → 背景画像を、下寄りに表示する
left → 背景画像を、左寄りに表示する
center → 背景画像を、中央寄りに表示する

これらの値は、単独で使用することもできますが、
じっさいに、表示位置を定義するときは、例のように、
２つの値を組み合わせて使用すると便利だと思います。

そのさい、値の間には「半角スペースキー」を入れるのを忘れずに。

あと、ちょっとオマケですが、
背景画像の表示位置を定義するばあい、
基本的には、上の値をつかって定義していくんですが、
もっと、１ｐｘ単位で設定したい場合、もあると思います。

その場合は、
属性「 background-position 」に、値として、「ｐｘ」、「％」を定義してあげることもできます。
例としては、下のような感じ。