ウェブ木箱：HTML講座-背景に画像を使ってみよう

☆背景に画像を使ってみよう - クイックガイド

			腹減り日誌♪ - donguri browser
		レンガ見てると往年の名作のあのゲーム思い出しますな。あれって取ったアイテムは・・・食べてたのかな？キノコとか・・・フラワーとか・・・コインとか(あれ？)


		１．	背景に画像を使ってみよう background


		２．	背景に画像を使うときの注意

←前回『画像を貼り付けてみよう』へ

次回『画像の表示位置と代替テキスト』へ→

ページ全体の背景に画像を指定する場合は、 <body>に属性をつけるよ。

背景画像を指定する属性名はbackgroundだよ。

属性値には<img>のsrc属性と同様、画像のパスを指定するので画像ファイルを同じフォルダにいれておこう。そうすれば画像ファイルの名前だけで指定できるよ。


<html> <head> <title>腹減り日誌♪</title> </head> <body background="renga.gif"> <font color="#ffffff"> レンガって洋食屋さんのイメージあるよね。</font> </body> </html>

腹減り日誌♪ -

レンガって洋食屋さんのイメージあるよね。

ブラウザでの表示はこちら(別ウィンドウ)

背景に画像を指定する時は必ず文字色と背景色も指定しておこう。文字色を指定するのは講座の第７回(ページ編２)で説明したのと同様の理由から。背景に画像を使うと多少なりとも読みにくくなるのも確かだから色の選択には気を使おう。

ところでどうせ隠れてしまう背景色を指定するのは、画像が何らかの原因で読み込めない場合やブラウザの設定で画像を読みこまないようにしている場合の他、読み込むまでの間には背景色が使われるから。例えば上のサンプルのような場合、背景画像が濃い色なので文字色を白に指定したけど背景画像が読み込めない状態で背景色が白になってしまったら文字が見えなくなるよね。背景画像に近い背景色を指定しておけばこの問題は解決するね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body background="renga_.gif"
 bgcolor="#b58a83">
<font color="#ffffff">
レンガって洋食屋さんのイメージあるよね。</font>
</body>
</html>


		ファイル名を間違って画像が読み込めなくても・・・。

腹減り日誌♪ -

レンガって洋食屋さんのイメージあるよね。


		背景色を指定しておけば文字を読むのに問題はないね。

ブラウザでの表示はこちら(別ウィンドウ)

	次は画像の表示位置や代替テキストについてだよ次へ→
	前回は画像を貼り付けるタグを紹介したね。 ←前へ

	ページ編－３
	HTML講座第１３回