■ 背景
▼
background-color
»» 背景色を指定する
▼
background-image
»» 背景画像を指定する
▼
background-repeat
»» 背景画像の繰り返し方法を指定する
▼
background-attachment
»» 背景画像を固定する
▼
background-position
»» 背景画像の位置を指定する
▼
background-position-x
background-position-y
»» 背景画像の位置を垂直・水平方向別に指定する
▼
background:
»» 背景を一括して指定する
■ background-position 背景画像の位置を指定する
background-position:◆
background-position:◆ ◆
|
◆
|
サイズを表す数値+単位
|
ボックス領域の左上を基点として、水平方向の位置（左からの距離）と垂直方向の位置（上からの距離）
を半角スペースで区切って指定します。
10px 30px は パディングの左から１０ピクセル、上から３０
ピクセルの位置に画像の左端を揃えます。
値を一つだけ指定した場合は、水平方向の位置を指定した事になり、
垂直方向は50%に設定されます。負の値も指定可能。
|
|
数値+%
|
画像の位置をボックス領域の幅、あるいは高さに対する割合で指定します。左上を基点として、
水平方向と垂直方向を半角スペースで区切って指定する点は同じです。
しかし、パーセントによる指定は値の解釈が異なり、ボックス領域の位置の割合と画像の位置の割合が揃います。
例えば、0% 0%とした場合、パディングの左上と画像の左上が揃い
10% 90%とした場合、パディングの左から10%上から90%の位置と
画像の左端から10%上端から90%の位置が重なって揃います。
値を一つだけ指定した場合は水平方向の位置を指定した事になります。
負の値も設定可能。
|
キーワード
|
top 上端
|
|
center 中央
|
|
bottom 下端
|
|
left 左端
|
|
right 右端
|
キーワードの指定について
垂直方向の位置を指定する場合はtop、center、bottom
水平方向の位置を指定する場合はleft、center、right
を半角スペースで区切って指定します。
値を一つだけ設定した場合は、もう一方はcenterに設定されます。
数値による指定とパーセントによる指定は組み合わせる事ができますが
キーワードによる指定と数値やパーセントによる指定を組み合わせて使用することはできません。
背景画像を１点だけ指定した位置に表示させるには、
background-repeat属性でno-repeatを同時指定して下さい。
|
IE4 |
IE5 |
IE5.5 |
IE6 |
NN4 |
NN4.7 |
N6.2 |
| サイズ |
○ |
○ |
○ |
○ |
× |
× |
○ |
| パーセント |
○ |
○ |
○ |
○ |
× |
× |
○ |
| キーワード |
○ |
○ |
○ |
○ |
× |
× |
○ |
|
