背景を変えよう
Webページ全体に背景色をつけたり、背景画像を表示したりすることができます。
その具体的な方法を見てみましょう。
背景色を指定
背景に色をつけるには『background-colorプロパティ』を使います。
これは、ブロックレベル要素とインライン要素の両方に適用することができます。
すなわち、Webページ全体に背景色を設定したり、見出しの背景に色をつけたりできます。
見出しに背景をつけると、文書構造の違いを視覚化でき、デザイン面でもメリハリがつきます。
例えば、body要素とh3要素の背景に色を指定するには、
body { background-color:#ffffe8; }
h3 { background-color:#ffe68b; }
のように記述します。
背景に画像を指定
背景に画像を指定するには『background-imageプロパティ』を使います。
これも、ブロックレベル要素、インライン要素問わず、すべての要素に適用することができます。
「background-image:url( ファイル.png);」
のように記述し、（）内には画像のURLを指定します。
背景画像をタイル状に並べる指定
h3 { background-image: url(img/bg.png); }
背景画像の繰り返し指定
『background-repeatプロパティ』を使うことで、繰り返し方法を細かく指定できます。
例えば、
h2 {
background-image: url(img/bg.png);
background-repeat: repeat-x;
}
h3 {
background-image: url(img/bg.png);
background-repeat: no-repeat;
}
p {
background-image: url(img/bg.png);
background-repeat: repeat-y;
}
のように指定すると、h2は横方向に画像を繰り返し、
h3は繰り返しなし、
pは、縦方向に繰り返されます。
特定の位置に画像を指定
特定の位置を指定するには、『background-positionプロパティ』を使います。
何も指定しなければ、背景画像は要素の左上が開始位置となります。
画像の開始位置を指定するには、
「background-position:50% 100%」
のように記述します。
最初の数値は横方向、次の数値は縦方向を意味し、それらを半角スペースで区切ります。
値の指定には%（要素の左上からの相対的な位置）を用いたり、
ピクセルで細かく指定することができます。
また、横方向には『left（左）』、『center（中央）』、『right（右）』のいずれか、
縦方向には『top（上）』、『center（中央）』、『bottom（下）』のいずれかを記述して位置を指定できます。
背景色と背景画像の同時指定
『backgroundプロパティ』を使って、背景色と背景画像（位置指定と繰り返し指定）を同時に指定することができます。
従来は背景画像の複数指定はできませんでしたが、CSS3では可能になっています。
h2 {
background: #ffe3e3 url(img/bg-h.png) no-repeat 5px center;
padding: 5px 5px 5px 30px;
}
のように記述します。
まとめ
- 背景色は、background-colorで指定する
- 背景画像は、background-imageで指定する
- backgroundプロパティは、色と画像を一括指定できる
- CSS3を使うと、背景に複数の画像を適用できる
