背景に画像を使うことができます。ページが華やいだ雰囲気になりますが、やりすぎにならないようにしてください。気をつけることは3つぐらいあります。
背景にする画像を作成し,スタイルシートに記入します。たとえば,
body {
background-image: url(images/naruto.png);
background-color: #e0e0ff;
}
この2行は次のように1行に書くこともできます。
body {background:#e0e0ff url(images/naruto.png);}
背景画像は繰り返し並べて表示されますから,データ量を押さえるため,小さい画像にします。画像によっては並べたときに模様が重なるように工夫する必要があります。
#e0e0ff は背景色です。背景画像が並べられると背景色は見えないのですが,何かの原因で画像が表示できなかったときにも類似した効果が出るように指定します。特に、たとえば暗い色の画像を背景に使って,文字の色を白っぽいものにすると,背景画像がないと文字が読めなくなります。背景色を暗い色に指定しておけば画像がなくても文字は読めます。
透過白
pタグの背景色
背景のあるページ haikei.html を作ります。背景画像は自作します。繰り返し並ぶことを考えてください。
文字が読めなくなる画像の場合は文字の入っている要素( pタグなどではさまれたところ)の背景色を指定して見やすくします。
xml宣言など
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
head部
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>わたよ のウェブページ</title> <style type="text/css"> body {background...... } h1 {background...... } ...... </style> </head>
body部
<body> <h1>わたよ のウェブページ</h1> <p>ホームページはほんとうはウェブページというらしい。</p> <p>h1,pタグは複数あっていいが、html,head,body,titleは一組だけ。</p> </body>
おしまい
</html>