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

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

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

■  背景

background-color   »» 背景色を指定する
background-image   »» 背景画像を指定する
background-repeat   »» 背景画像の繰り返し方法を指定する
background-attachment   »» 背景画像を固定する
background-position   »» 背景画像の位置を指定する
background-position-x
  background-position-y
  »» 背景画像の位置を垂直・水平方向別に指定する
background:   »» 背景を一括して指定する

■ background-position-x  背景画像の位置を垂直・水平方向別に指定する
   background-position-y

background-position-x:  (水平方向)
background-position-y:  (垂直方向)

サイズをあらわす数値+単位 ボックス領域の左上を基点とし、水平方向からの位置(左からの距離)をbackground-position-xで、 垂直方向からの位置(上からの距離)をbackground-position-yで指定します。
数値+% 画像の位置をボックス領域の幅、あるいは高さに対する割合で指定します。 左上を基点をして、指定する点は同じです。

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

例えば、background-position-x:0%とした場合、パディングの左端と 画像の左端が揃い、background-position-y:50%とした場合、 パディングの上から50%の位置と画像の上端から50%の位置が重なって揃います。

キーワード top  上端 水平方向の位置を指定する場合はleft、center、rightをbackground-position-xに指定します。 垂直方向の位置を指定する場合はtop、center、bottomをbackground-position-yに指定します。
center  中央
bottom  下端
left  左端
right  右端

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

LINK

 

◆ このページのTOPへ ◆







Copyright © 2004 − ykr414. All Rights Reserved.