XHTML/CSS・トップ | CSSプロパティ・目次

●背景画像のポジションを決める

 background-positionは(1枚の)背景画像のポジションを指定するプロパティです。使える値にはパーセンテージ(〜%)ですが、単位付きの数値(長さ)、および left、center、right、top、bottomのキーワードも使えます。また、background-image、background-repeat("no-repeat=繰り返しなし"の値を使用)のプロパティを指定したすべての要素に適用することができます。


【CSS】

body {
 background-color: #000000;
 background-image: url(a014ban.gif);
 background-repeat: no-repeat;
 background-position: 100% 0%;
 color: #ffffff;
}

【HTML】

 特に指定する必要なし


【解説】↑↓

 background-positionに"100% 0%"の値を指定することにより、a014ban.gifの背景画像を画面右端の一番上にひとつだけ表示させています。(バナーをサンプルとして使用)下の表に表示位置とパーセンテージの関係を記載してあります。また、0%、50%、100%の組み合わせの代わりに left、center、right、top、bottom および、その組み合わせを使うこともできます。(こちらの解説は割愛します。)

背景画像の位置とパーセンテージ(〜%)の関係
位置 パーセンテージの組み合わせ
左右の左端、上下の上 0% 0%
左右の左端、上下の中央 0% 50%
左右の左端、上下の下 0% 100%
左右の中央、上下の上 50% 0%
左右の中央、上下の中央 50% 50%
左右の中央、上下の下 50% 100%
左右の右端、上下の上 100% 0%
左右の右端、上下の中央 100% 50%
左右の右端、上下の下 100% 100%

【補足】

 0%〜100%の範囲内で任意のパーセンテージ(〜%)を指定することもできます。二つのパーセンテージのうち、最初の値が左右のパーセンテージを表し、次の値が上下のパーセンテージを表しています。それぞれの開始位置は左右が左から、上下が上からですが、値に使用する種類(単位付きの数値、パーセンテージ)によって、表示位置の多少の違いがあります。また、パディング領域などの影響も受けますので指定した都度、ブラウザで確認したほうが良いでしょう。また、0%はパーセント(%)を省略して0(ゼロ)と使うことも可能です。


【応用】

body {
 background: #000000 url(a014ban.gif) no-repeat 100% 0%;
 color: #ffffff;
}

【解説】↓

 backgroundは背景画像をまとめて指定するプロパティです。半角スペースで区切ることにより、背景関係のプロパティの値を複数指定することができます。(最初に紹介した指定方法と同です。)


■関連ページ

XHTML/CSS・目次 | 背景・目次

Copyright (C) 2005-2007 http://www.xml.vc/