CSSでページ背景に画像を表示する方法

画像をページの背景として表示する

画像をページの背景として表示するには、background-imageプロパティで表示する画像を指定します。

body {
background-image:url(ファイル名);
}

上の「ファイル名」には、表示する画像のファイル名もしくは場所（URL）を指定します。

ページの背景画像の変更方法

例えば、下画像のようなページに背景画像を表示するとします。

[背景画像を表示するページ]

[表示する背景画像]

この場合、以下のようにCSSとHTMLを記述します。

[CSSの記述例]

body {
background-image:url(stripe_b02.gif);
}

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>背景画像の表示</title>

</head>

<body>

<h1>背景画像の表示</h1>

<p>ページに背景画像を表示します。</p>

</body>
</html>

[表示サンプル]

このようにページ全体に背景画像が表示されます。

background-repeatについて

なお、background-repeatを使えば表示方法を変更することができます。
上の例ではページ全体に背景画像を表示しましたが、縦だけ、横だけなどに指定することも可能です。

background-repeat:repeat-x;: 横軸にのみ、繰り返して背景画像を表示します。
background-repeat:repeat-y;: 縦軸にのみ、繰り返して背景画像を表示します。
background-repeat:repeat;: 全てに背景画像を表示します。何も指定しなかった場合、こちらが自動的に選択されます。
background-repeat:no-repeat;: 背景画像を繰り返し表示させません。1つだけ表示されます。

[CSSの記述例]

body {
background-image:url(stripe_b02.gif);
background-repeat:repeat-x;
}

背景画像を一部表示したい場合などに利用すると便利です。状況に応じて使ってみましょう。

覚えておきたいポイント

ファイル名は正確に

背景画像として表示したいファイル名は正確に入力するようにしましょう。例えば、a.jpgというファイルを表示する場合にはurl(a.jpg);と拡張子まで正確に入力する必要があります。aだけはNGです。

エリアごとに背景画像を指定する

異なったエリア（コンテンツ）ごとに背景画像を表示するには、任意のセレクタのbackground-imageプロパティで画像を指定します。

例えば、下画像の「ヘッダー」「サイドナビ」「フッター」に、それぞれ違う背景画像を表示するとします。

[CSSの記述例] ※実際はもっと多くのプロパティを使っていますが、説明のため省略しています。

header {　←ヘッダー
background-image:url(stripe_b02.gif);
}

#sidenavi {　←サイドナビ
background-image:url(stripe_b04.gif);
}

footer {　←フッター
background-image:url(stripe_b07.gif);
}

[HTMLの記述例]

<body>

<nav>
<div id="sidenavi">
<h2>サイドナビ</h2>
<ul>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
</ul>
</div>
</nav>

<section>
<h2>メインコンテンツエリア</h2>
<p>テキストテキスト</p>
</section>

<section>
<h2>テキスト</h2>
<p>テキストテキスト</p>
</section>

</article>

<footer>
<h2>フッター</h2>
<p>テキストテキスト</p>
</footer>

</div>

</body>
</html>

[表示サンプル]