ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

背景に画像を表示する

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

画像をページの背景として表示するには、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>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</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の記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>背景画像の表示</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="wrap">

<header>
<h1>ヘッダー</h1>
</header>

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

<article id="contentsbox">

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

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

</article>

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

</div>

</body>
</html>

[表示サンプル]
背景画像が表示された例

このように、ページ全体だけではなく任意のコンテンツの背景画像も変更することが可能です。

覚えておきたいポイント

階層に気をつけよう

呼び出す画像ファイルの階層に注意しましょう。例えば、HTMLファイルと同じフォルダにa.jpgという画像があればurl(a.jpg);でOKです。
しかし、「img」フォルダの中にa.jpgが入っている場合は、url(img/a.jpg);と記述する必要があります。

要素の右・左寄せと回り込み
« 前のページへ ページの背景色を変える

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。