CSSで背景画像の表示方法を自在に指定(3ページ目)

背景画像の表示位置を制御する

HTMLでは、背景画像の表示位置を具体的に指定することは無理です。 余白を含めた大きな画像を用意して表示させることで、左上を基準にして特定の座標に表示させることは可能ですが、 それでは「中央」や「右下」「右上」「左下」などの指定ができません。

スタイルシートでは次のようなことが可能です。

• 上から50ピクセル左から30ピクセルの位置に表示
• 上から30％・左から40％の位置に表示
• 右上に表示
• 右下に表示
• 中央に表示

位置に関しては、かなり自由自在に指定できます。

次のような画像を用いた場合に、どのような表示になるのかを見てみましょう。

この指定を実現する方法は、以下の通りです。

background-positionプロパティを使う

スタイルシートに次の「background-position」プロパティを使った指定を加えます。

background-position: 50px 30px;     …(左50px,上30px)
background-position: 30% 40%;       …(左30％,上40％)
background-position: right bottom;  …(右下)
background-position: center center; …(中央)

この background-position プロパティには、横方向位置・縦方向位置の順番で2つの値を指定します。 値には、

……の記述方法があります。

位置キーワードの場合、 「right bottom」と指定すれば「右下」になりますし、 「left center」と指定すれば「左端の中央」、 「center top」と指定すれば「上端の中央」になります。

ただし、「left 30%」のように、キーワードと数値を混在させた指定はできません。キーワード同士か数値同士の指定のみ可能です。数値での指定の場合なら、実数値と割合の混在は可能です。

※注意：
background-positionプロパティだけを指定すると、背景画像はタイル状に繰り返して表示されます。 画像を1点だけに表示させたい場合には、同時に前ページでご紹介した「background-repeat」プロパティで値に「no-repeat」を指定して、「繰り返さない」指定を追記する必要があります。
また、スクロールバーが出るほど長いページの場合は、次のページでご紹介する「背景画像を固定する方法」も同時に用いないと望み通りにならない場合もあります。

このプロパティを使うことで、先ほどの

• ウインドウの中央に1つだけ画像を表示
• ウインドウ右下にマスコットを表示

という希望は実現しますね。
前者は、

background-position: center center;
background-repeat: no-repeat;

と記述し、後者は、

background-position: right bottom;
background-repeat: no-repeat;

と記述することで実現できます。

背景画像のスクロールを制御する

さて、次に、画像をスクロールさせず、固定させておく方法をご紹介致しましょう。
また、最後にはユーザビリティ上も重要になる背景色の指定方法と、背景関連の指定を一括して記述する方法もご紹介致します。

では、次のページへ →