背景に画像

背景を画像にすべきか

背景に画像を使うことができます。ページが華やいだ雰囲気になりますが、やりすぎにならないようにしてください。気をつけることは３つぐらいあります。

1. 全体にはっきりとした模様をつけると上の文字が読みにくくなる。文字とのかねあいをよく考えること。
2. 背景がよくてもページの内容にはまったく関係がない。飾りより相手のためになる情報を提供することに力をいれたい。ただ、デザインそのものを見てもらいたいページはそれが内容となる。とはいうものの、練習で作るページは内容についてはそれほど真剣に考える必要はない。
3. やはり画像一般に言えることだが，データ量を減らすように考えること。

どうすればよいか

背景にする画像を作成し，スタイルシートに記入します。たとえば，

body {
  background-image: url(images/naruto.png);
  background-color: #e0e0ff;
  }

この２行は次のように１行に書くこともできます。

body {background:#f0f0f0 url(images/grayst.png);}

背景画像は繰り返し並べて表示されますから，データ量を押さえるため，小さい画像にします。画像によっては並べたときに模様が重なるように工夫する必要があります。

#f0f0f0 は背景色です。背景画像が並べられると背景色は見えないのですが，何かの原因で画像が表示できなかったときにも類似した効果が出るように指定します。特に、たとえば暗い色の画像を背景に使って，文字の色を白っぽいものにすると，背景画像がないと文字が読めなくなります。背景色を暗い色に指定しておけば画像がなくても文字は読めます。

他の背景にしてみる

現在の背景画像

---

透過白
pタグの背景色

課題

sakuhin.html に背景をつけます。背景画像は自作します。繰り返し並ぶことを考えてください。

文字が読めなくなる画像の場合は文字の入っている要素( pタグなどではさまれたところ)の背景色を指定して見やすくします。