★background-position(背景の位置)

戻る

background-position(背景の位置)


解説
背景に画像を使用するとき、画像の表示位置を指定する属性です。

数値指定
<length>
<percentage>

キーワード指定(横方向)
left:左に表示
center:中央に表示
right:右に表示
キーワード指定(縦方向)
top:上に表示
center:中央に表示
bottom:下に表示

1値又は2値で指定
キーワードは、パーセンテージの値または、長さの値と
組み合わせることはできません。

1値指定の50%は縦横共に、
50%の意味になる。(50%=center)

top leftとleft top = 0% 0% = 0%
topとtop centerとcenter top = 50% 0%
right topとtop right = 100% 0%
leftとleft centerとcenter left = 0% 50%
centerとcenter center = 50% 50% = 50%
rightとright centerとcenter right = 100% 50%
bottom leftとleft bottom = 0% 100%
bottomとbottom centerとcenter bottom = 50% 100%
bottom rightとright bottom = 100% 100% = 100%

初期値

0% 0%

%値の基準 そのエレメント自身との相対値

適用

ブロックレベルエレメントと互換エレメント

継承

しない

対応状況
全ての値 L1 L2   N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3   E4 E5 ME5 E55 E6
使用例

ソース

表示&操作

スタイル部に、

body{background-image:url(../img/poko_b.png);
   background-repeat:no-repeat;
   background-position:right center;}

と記述すると。

背景画像(バナー)が、ページの右端の
中央に表示されます。
数値指定の使用例は、background-attachment(背景の固定) を参照して下さい。


Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/background-position.html
E-mailpokochan@mx1.tees.ne.jp