さて、次に、背景色ではなく背景画像を指定する方法をご紹介致しましょう。
background-image プロパティ
任意の箇所に背景画像を指定するには、background-image プロパティを使います。
background-image: url("sample.jpg");
上記の記述は、「 sample.jpg 」という画像ファイルを背景画像として指定しています。 この画像は、次のようなものです。
先ほどと同様に、背景画像を加えたい望みの要素の開始タグに記述します。 ここでは、1つの段落（ <p>～</p> ）に適用してみます。
<p style="background-image: url('sample.jpg');">
All About Japan は ... が運営しています。
</p>
※style属性の値をダブルクオーテーション（ "～" ）で囲んでいるので、画像URLの指定はシングルクオーテーション（ '～' ）で囲んでいます。 ダブルクオーテーションで囲まれた中に、さらにダブルクオーテーションを用いることはできませんので注意が必要です。
すると、この要素内に背景画像が付きます。上記の記述は、次のように表示されます。
All About Japan は、株式会社リクルート・アバウトドットコム・ジャパンが運営しています。
段落全体に背景画像が付いたことがお分かり頂けると思います。
上記では、ブロックレベル要素に適用していますが、インライン要素に適用することももちろん可能です。 その場合は、文字の上だけに画像が表示されます。
All About Japan は、
<span style="background-image: url('sample.jpg');">
株式会社リクルート・アバウトドットコム・ジャパン
</span>
が運営しています。
上記の例なら、文章中の該当要素内（ここでは <span>～</span> ）だけに背景画像が付きます。この記述は、次のように表示されます。
All About Japan は、株式会社リクルート・アバウトドットコム・ジャパンが運営しています。
ついでに、文字色も同時に指定するには？
ここまでで、背景色や背景画像の付け方はお分かり頂けたと思います。
さて、背景に色や画像が付けられるようになったら、文字にも色を付けてみたくなりませんか？
文字色は、例えばHTMLではfont要素（＝<font color="red">というタグ）を用いても付けることができます。しかし、ここではせっかくなので、スタイルシートで記述してみましょう。 その方が記述量も少なくて済みます。
