カスケーディングスタイルシートリファレンス・ ブラウザの種類による対応状況などもプロパティごとに掲載!

CSS −スタイルシートリファレンス− ブラウザの種類による対応状況などもプロパティごとに掲載!

スタイルシートの基礎 CSS
バナーはダウンロード
してお使い下さい。

■  背景

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 は パディングの左から10ピクセル、上から30 ピクセルの位置に画像の左端を揃えます。 値を一つだけ指定した場合は、水平方向の位置を指定した事になり、 垂直方向は50%に設定されます。負の値も指定可能。

数値+% 画像の位置をボックス領域の幅、あるいは高さに対する割合で指定します。左上を基点として、 水平方向と垂直方向を半角スペースで区切って指定する点は同じです。

しかし、パーセントによる指定は値の解釈が異なり、ボックス領域の位置の割合と画像の位置の割合が揃います。

例えば、0% 0%とした場合、パディングの左上と画像の左上が揃い 10% 90%とした場合、パディングの左から10%上から90%の位置と 画像の左端から10%上端から90%の位置が重なって揃います。 値を一つだけ指定した場合は水平方向の位置を指定した事になります。 負の値も設定可能。

キーワード top  上端
center  中央
bottom  下端
left  左端
right  右端

  キーワードの指定について

垂直方向の位置を指定する場合はtop、center、bottom
水平方向の位置を指定する場合はleft、center、right
を半角スペースで区切って指定します。 値を一つだけ設定した場合は、もう一方はcenterに設定されます。

数値による指定とパーセントによる指定は組み合わせる事ができますが キーワードによる指定と数値やパーセントによる指定を組み合わせて使用することはできません。

背景画像を1点だけ指定した位置に表示させるには、 background-repeat属性でno-repeatを同時指定して下さい。

IE4 IE5 IE5.5 IE6 NN4 NN4.7 N6.2
サイズ × ×
パーセント × ×
キーワード × ×

LINK

 

◆ このページのTOPへ ◆







Copyright © 2004 − ykr414. All Rights Reserved.