背景

背景特性

background 特性で指定したものは、ボックス内のパディングと内容物を 表示する領域の背景となり、ボーダーとマージンは対象外となる。

background特性について改めてとりあげる。

background-color特性

要素の背景色を決定する。

• 色

  RGB値または名前による色指定

• transparent

  透明(親要素の色が透けて見える)

とくに指定しないときの初期値は transparent である。

background-image特性

背景画像を指定する。画像ファイルは url 表記で指定する。

body {background-image: url("foo.png")}

利用者よっては画像が表示できない(ようにしている)場合があるため、 background-image特性で画像を指定する場合には、それと同系色の 色を background-color 特性で指定しておくのが望ましい。 画像を指定しない場合は単語 "none" を指定する。

body {background-image: url("foo.png"); background-color: white}
p {background-image: none}

background-repeat特性

背景画像を用いる場合、デフォルトではタイル状に繰り返し敷きつめ て表示する。それ以外の配置法も指定できる。

• repeat

  タイル状に敷きつめる(標準)

• repeat-x

  X軸方向だけに繰り返し敷きつめる

• repeat-y

  Y軸方向だけに繰り返し敷きつめる

• no-repeat

  繰り返さず1回だけ表示

background-attachment特性

背景画像を文書とともにスクロールさせるか、表示域に 固定するかを指定する。

• scroll

  画像をスクロールさせる

• fixed

  画像を固定させておく

ただし、"fixed" はサポートされない場合がある。

background-position特性

背景画像の初期位置を指定する。background-repeatで 繰り返しが指定されるときは、ここを起点とした繰り返しになる。 指定できる値は以下のいずれか。

• パーセンテージによる座標指定

  	  background-position: X% Y%

  とすると画像の左端からX%、上端から Y%の点が、パディング領域の左端からX%、 上端からY%の位置に配置される。100% 100% であれば、 画像の右下とパディング領域の右下がぴたりと一致する。

• 長さによる座標指定

  background-position: X Y

  とすると、画像の上左端がパディング領域の(X,Y)の 位置に配置される。

• キーワードによる指定

  X軸方向の位置を指定するキーワード、

  left	(0%と同じ)
  center	(50%と同じ)
  right	(100%と同じ)

  と、Y軸方向の位置を指定する、

  top	(0%と同じ)
  center	(50%と同じ)
  bottom	(100%と同じ)

  を1つ、または任意の順序で2つ指定する。1つ指定した場合は X軸位置だけの指定とみなし、Y軸位置は50%とする。

パーセント指定と長さ指定は組み合わせてもよいが、 いずれもキーワード指定とは組み合わせられない。

background簡略記述特性

上記全ての背景特性(background-image, background-repeat, background-attachment, background-position)を同時に指定する ための特性。各特性に対する値を列挙することができる。

→ fixed no-repeat の例