授業形式でhtml・ソース・タグを勉強し、ホームページを自作する　背景画像（全面・固定）

ページの背景は、背景色の「bgcolor」の代わりに「body」タグに「background="*****"」と書きます。

<body bgcolor="#ffffff" background="gazou/bcg1.gif">
<body bgcolor="#ffffff" background="gazou/bcg2.gif">
<body bgcolor="#ffffff" background="gazou/bcg3.gif">

ここで「bgcolor="#ffffff"」に注目。
「背景画像（ページの場合、壁紙）を書くのに背景色は不要では？」と思われるでしょう。
これは、もし画像が呼び出せなかったときでも文字が読めるようにするためです。
例えば、黒っぽい画像を背景に使用して文字色を白色にしたとき、画像が表示されれば問題ありませんが、画像が呼び出されなかったり呼び出すのが非常に遅い場合、背景はデフォルト（白色）になります。
このとき、文字も白色なので読めません。

これを避けるために、背景画像に近い色を指定しておきます。

≪練習≫
保存した「練習３.html」の「body」部分に背景画像を加えます。
「練習３.html」を右クリックし、「プログラムから開く」→「Notepad」をクリック。
「ファイル」→「名前をつけて保存」を選び、「練習４.html」で保存します。

「body」部分を下記のソースに入れ替えます。

<body bgcolor="#ffffff">
			↓
<body bgcolor="#ffffff" background="gazou/bcg1.gif">

好みで「bcg2.gif」や「bcg3.gif」に入れ替えてください。
決まったら上書き保存します。

さらに「</body>」の前に１行空けて、下記のソースをコピペします。

<img src="gazou/space.gif" width="5" height="1200">

これは透明の画像（space.gif）で、高さ（height）を大きくしてスクロールバーを出すようにした細工です。
右側のスライドバーをスクロールすると、背景画像も動きます。

今度は「body」部分を下記のソースに入れ替えます。

<body bgcolor="#ffffff" background="gazou/bcg1.gif">
					↓
<body bgcolor="#ffffff" background="gazou/bcg1.gif" bgproperties="fixed">

または、スタイルシート記述（こちらの方がより多くのブラウザなどに有効）で書くと次のようになります。

<body bgcolor="#ffffff" background="gazou/bcg1.gif">
					↓
<body style="background:#ffffff url(gazou/bcg1.gif) fixed;">

好みで「bcg2.gif」や「bcg3.gif」に入れ替えてください。
完成したら上書き保存してください。
右側のスライドバーをスクロールしても、背景画像は動きません。

≪完成したイメージ≫