Go to information

background-position

background-positionプロパティは background-imageプロパティで背景画像を表示する場合に、背景領域内で画像がタイル状に繰り返し表示される初期位置を指定します。背景画像の繰り返し方法は background-repeatプロパティでコントロールすることができます。

初期値
0% 0%
適用対象
すべての要素
継承
しない
メディア
visual

値は "em", "px" などの単位識別子を伴う数値の長さパーセンテージ値による割合、または以下の固有のキーワードで背景画像を表示する左右方向と上下方向の初期位置を左右方向・上下方向の順に半角スペースで区切って指定します。ただし、長さやパーセンテージ値の数値による指定とキーワードによる指定の組み合わせは避けましょう。CSS2.1 では数値とキーワードの組み合わせも許可されているのですが、CSS2.0 に適合する UA では数値とキーワードを組み合わせた指定は無効なものとして解釈します(長さとパーセンテージ値の組み合わせは問題ありません)。また、長さとパーセンテージ値の数値には負の値を指定することもできます。

left
左右方向の指定のみ可能で左揃え(0%と等価)で配置します
right
左右方向の指定のみ可能で右揃え(100%と等価)で配置します
center
左右方向・上下方向の両方に指定可能で中央(50%と等価)に配置します
top
上下方向の指定のみ可能で上揃え(0%と等価)で配置します
bottom
上下方向の指定のみ可能で下揃え(100%と等価)で配置します

値にひとつの数値、またはキーワードしか記述しなかった場合、その値は左右方向の配置に適用され、上下方向には自動的に "50%" の値が適用されます。なお、背景領域とは通常はボーダー(枠線)の領域まで(内容領域+パディング+ボーダー)を指すのですが、html要素とその第一の子要素である body要素といったルート部については、例外的にmarginプロパティの値を含む領域まで(内容領域+パディング+ボーダー+マージン)を背景領域として計測します。また、結合ボーダーモデルのセル(border-collapse : collapse ;)についてはパディング領域まで(内容領域+パディング)が背景領域となります。

長さで指定する場合、画像と背景領域ともに左上が基点(0,0)であり、そこから画像の左上端をどれぐらい離すかを指定します。パーセンテージ値で指定する場合、参照する基準値は背景領域の幅であり、背景画像のサイズに対する割合で指定します。ただし、background-attachmentプロパティで背景画像が表示域に対して固定されている(background-attachment : fixed ;)場合は画像位置は表示域に基づきます。

background-positionプロパティの実装状況

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5

サンプル

記述例
.airplane {
background-color : transparent ;
background-image : url(image.gif) ;
background-repeat : no-repeat ;
background-position : center ;
text-align : center ;
}
表示例

background-positionプロパティを使えば、見出しのアクセントに余白になっている右側に背景画像を表示したりと効果的なデザインが可能になります。大きな1枚の背景画像を固定表示させたい場合にも background-attachmentプロパティを使うのではなく、"background-repeat : no-repeat ;" を指定した上で、background-positionプロパティにその背景画像を表示したい位置を指定するだけで可能です。

現在位置
  1. W3G
  2. CSS
  3. 色と背景
  4. background-position
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:01:33+09:00
更新
2008-12-29T04:30:36+09:00
URI
http://w3g.jp/css/color_background/background-position
検索