background-imageプロパティ

background-imageプロパティは、要素の背景画像を定義します。画像を指定するには、値にurlと記述し、「( 」と「)」で囲んで画像ファイルへのパスを記述します。画像はタイル状に繰り返して表示されます。

入力例に使用した画像


body {
    background-image: url(back.gif);
}
h2 {
    background-image: url(back_h.gif);
}

上の例では、<body>要素に背景画像を指定しています。表示領域全体に画像がタイル状に表示されます。背景画像を指定した場合、ネストされる他の要素にも、背景画像が表示されます。

ただし、ネストされた要素で背景画像を指定すると、その背景画像が適用されます。例では、<h2>要素に別の画像を指定しています。

確認ページを見ていただければ分かるように、背景画像を使用すると、文章が読みにくくなりがちです。なるべく色の薄いものを使用したり、no-repeat等を指定して、タイル状に配置させない等しましょう。