背景

背景の色、イメージ、イメージの表示法を指定する属性を表に示す。

background-color

要素の背景色を指定する属性。

• すべての要素で指定できる。
• 色を指定するときは値にcolor属性と同様に色の名前または、RGB値を指定する。
• 背景色を透過するにはtransparentを指定します。これが初期値。

次の例はH1要素の背景を赤にするスタイルです。

H1 { background-color : red }

• background-colorのサンプルを表示する。

background-image

背景画像を指定する属性。

• すべての要素で指定できる
• 背景画像を指定するときはurl関数を使用
• 背景画像を指定しないときは値noneを指定
• 初期値はなし

次の例は文書全体の背景画像にback.gifを指定し、要素H1の背景は指定しないときの記述です。

background-image : url(back.gif)
H1 { background-image : none }

background-repeat

背景画像の繰り返しを指定する属性。

• すべての要素で使用できる
• 指定できる値は次のとおり

次の例は背景画像にb1.gifを指定し、その画像を縦方向に繰り返し表示するときの記述です。

BODY {
  background-image : url(b1.gif);
  background-repeat : repeat-y;
}

background-attachment

背景画像を表示内容に合わせてスクロールするかを指定する属性。

• すべての要素で指定できる
• 背景画像を表示内容に合わせてスクロールさせるときはscrollを指定。これが初期値
• 背景画像をスクロールさせないときはfixedを指定。

次の例は背景画像にb1.gifを指定し、その画像を縦方向に繰り返し表示させ、スクロールさせないときの記述です。

BODY {
  background-image : url(b1.gif);
  background-repeat : repeat-y;
  background-attachment : fixed;
}

background-position

背景画像の表示位置を指定する属性。この属性には画像の表示位置(xとy)を示す値を次のいずれかの形式で指定します。

• パーセンテージ
• 長さ
• キーワード(表を参照)

• 表示位置を0% 0%と指定すると背景画像の左上が表示領域の左上から表示される。
• 表示位置を50% 50%と指定すると背景画像の中心点が表示領域の中心と一致する。
• 表示位置を100% 100%と指定すると背景画像の右下が表示領域の右下と一致する。

もし、表示位置指定がひとつしかない場合はその値が水平方向の位置を示し、垂直方向は50%と扱われる。

次の例は、背景画像が常に右下に表示されるようにするものである。

BODY {
  background-image : url(back.gif);
  background-repeat : no-repeat;
  background-attachment : fixed;
  background-position : 100% 100%;
}

• 背景画像をウィンドウ中央に固定するサンプル
• 背景画像をウィンドウ右下に固定するサンプル

background

background-color、background-image、background-repeat、background-attachment、background-positionをまとめて指定できる簡略表記。

各属性の値をスペースで区切って次のように指定する。

P { background : url(bkimage.gif) blue 50% repeat fixed }