CSS2.1まとめ書きも3回目。
今回はバックグラウンドカラー(背景の色)やバックグラウンドイメージ(背景に敷くイメージ)を設定するプロパティbackgroundに関してです。
これは、WebをCSSでデザインするにあたって非常に重要になるプロパティなので、しっかり覚えておいたほうがいいでしょう。
まあ、Dreamweaver使っちゃえば簡単に設定できちゃうんですけどねぇ。。


まずは各プロパティを解説。よく使う書き方で説明します。

background-color:#000000;
バックグラウンドカラー(背景色)を黒にする場合上記のように書きます。
値は16進数によるRGB指定及びキーワード(white、green等)になります。

background-image:url(images/bg.gif);
バックグラウンド(背景)にイメージを敷く場合に上記のように書きます。
「url(イメージのパス)」という値になります。
パス表記は絶対パス、相対パスどちらでも可です。

background-repeat:no-repeat;
バックグラウンドのイメージの繰り返し設定です。
初期値(repeat)は縦方向、横方向ともに繰り返す設定になっています。
(つまり、バックグラウンドにイメージがタイル上に並ぶ)
no-repeatで繰り返しをなしに、repeat-x、repeat-yでそれぞれ横方向、縦方向のみに繰り返すという設定になります。

background-position:0px 5px;
バックグラウンドに敷いたイメージの位置を指定します。
数値にした場合は左上を基準にして左からの距離、上からの距離の順で書きます。
数値以外にleft(左揃え、0pxと同等)、right(右揃え)を左から距離に、top(上揃え、0pxと同等)、bottom(下揃え)を上からの距離にすることもできます。
それぞれ、center(中央揃え)を使うことも可能です。

で、これらをまとめて書く場合は以下のようになるわけです。
background:url(images/bg.gif) no-repeat 0px 5px;

これも順序は問いません。(background-positionの値の順番は変えられません)
したがって以下のようにも書けるわけです。
background:0px 5px no-repeat url(images/bg.gif);

さて、ここであるプロパティが抜けていることに気付きます。
「background-color」です。
通常、バックグラウンドに画像を敷けば色の設定はいらないのでこう書くことが多いのですが、
実は「background-color」も含めてひとまとめで書けちゃいます。

background:#000000 url(images/bg.gif) no-repeat 0px 5px;
この場合も記入する順番は問いません。(くれぐれもbackground-positionの値の順番は変えないように)
が、個人的には上記の書き方が一番間違いなくていいと思ってます。
background:color image repeat position;
と言った感じですね。

以下のサイトの様にバックグラウンドに色とイメージと両方使う場合に使うことがあります。
イメージとカラーの併用例
bodyにbackground-imageを設定しているため、その配下のdivに
background:white url(side_yellow.png) repeat-y top right;
といったような形でbackground-colorとbackground-imageを両方設定しています。