CSS2.1まとめ書き－background編（HTML・CSSリファレンス）

1年以上前の記事です。内容が古い可能性があります。

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

素材辞典 Vol.147 CGバックグラウンド ポップ&スイート

posted with カエレバ

データクラフト 2004-11-18

Amazon

楽天市場

Yahooショッピング

Yahooオークション

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

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

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

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

で、これらをまとめて書く場合は以下のようになるわけです。

これも順序は問いません。（background-positionの値の順番は変えられません）
したがって以下のようにも書けるわけです。

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

この場合も記入する順番は問いません。（くれぐれもbackground-positionの値の順番は変えないように）
が、個人的には上記の書き方が一番間違いなくていいと思ってます。

と言った感じですね。

以下のサイトの様にバックグラウンドに色とイメージと両方使う場合に使うことがあります。

bodyにbackground-imageを設定しているため、その配下のdivに

といったような形でbackground-colorとbackground-imageを両方設定しています。