前目次

他のタグの背景

bodyだけではなく、他のタグにも背景色を指定できるものなら画像も指定できます。
この部分はpタグです。
文字のある部分に模様があると読みにくいので、最近はあまり見かけなくなりました。ここに使われている背景画像のように細かな模様のないグラデーションならばそれほど読みにくいこともありませんが、文章中心のページでは文章の部分に画像がかからないようにする方が無難でしょう。

スタイルの指定は例えば次のようにします。

body        {background:#f0f0f0 url(images/gradc3.jpg);}
p.withbg    {background:#eeffee url(images/long2.png);}
span.withbg {background-image: url(images/pin2.png);}

背景色を指定しなければ、画像が用意できなかったり、透過部分があったりすると、その下のものが透けて見えます。pin2.pin は周りが透過なので p の背景画像の色が透けて見えています。

繰り返しなしの背景をpタグに

ここから下のpタグにはクラス指定により右上に画像がつきます。no-repeatを使って、左上に一つだけです。左上については場所の指定をしなければ左上なので面倒なことはいりません。paddingを広めにして、文字と背景画像が重ならないようにしています。

画像は太い枠線が一部だけになったようなものにしました。このページの下半分は、背景画像を見えなくしています。
真っ白な中に

の形の画像があると目立ちます。
スタイルの指定は例えば次のようにします。