§01-08…背景画像 {background-image}

2016/6/12

(01) フォルダー内に「grd01.gif」をコピーしておきましょう。
grd01 (grd01.gif 80×80)

(02) この画像をWebページ全域(body)の背景にします。画像を背景にするには、CSSの「background-image」プロパティを用います。値には対象画像ファイルの場所を「url(grd01.gif)」のような形式で指定します。CSSのbodyセレクタ内を以下のように更新してください。

body{
background-color:#FFFFCC;
background-image:url(grd01.gif);
}

(03) ブラウジングしましょう。通常はこのように、背景画像を設定すると「background-color」で指定した値は無視されます。

(04) フォルダー内に「grd02.gif」をコピーしておきましょう。なお、この画像の背景は透明になるよう処理してあります。
(grd02.gif 80×80)
(05) この画像をWebページの背景にします。CSSのbodyセレクタ内を以下のように更新してください。

body{
background-color:#FFFFCC;
background-image:url(grd02.gif);
}

(06) Webページを更新しましょう。透明処理をした画像を用いた場合は、「background-color」で指定してある色が透明部分に適用されます。