backgroundプロパティの使い方

backgroundプロパティについて

backgroundプロパティはbackground-color, background-image, background-repeat, background-attachment, background-positionの値、これら5つの背景に関するスタイルを一括、あるいは、一部を指定することができます。
更に一部を指定した場合はそれぞれの値は初期値で設定されるとなっています。

このbackgroundプロパティではCSSのカスケード機能で戸惑うことがあります。
backgroundプロパティでcolorの値を指定しておきます。次に同じセレクタに上書きをするとcolorの値を指定してないものは初期値（透明）に設定されます。なんとなく最初に設定した色が反映されそうだけれどもそうではありません。

次のサンプルがその例です。

サンプルデモ

div {
	background: #FCF;
	height: 200px;
	width: 200px;
	border: 1px solid #00F;
}

.box2 {
	background: url(bg_stripe.gif) repeat-x;
}

body {
	background: #9FF;
}

<div>Box1</div>
<div class="box2">Box2</div>

divに設定したピンク色がBox2にも反映されそうですが、クラスbox2には背景画像の指定しかしていませんので、colorプロパティは初期化せれて透明となりbodyの色が透けて見えるのです。