背景画像のサイズは複数の要素で共通なのでまとめて指定し、その後に個別の要素に背景画像を指定するという場合があります。
例えば以下のような見た目を作りたい場合なんかがそうでしょう。

HTMLはインスペクターか何かで見ていただくとして、関係あるCSSは以下のようになっています。

.test li {
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: 50px 50px;
	background-size: 50px 50px;
}
.test .red {
	background-image: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya01.png);
}
.test .blue {
	background-image: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya02.png);
}
.test .green {
	background-image: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya03.png);
}

さて、上記の例ではbackground-imageプロパティを利用していますが、background-repeatなどを個別に指定するのが面倒だということで、backgroundプロパティを利用して以下のように指定を行なってみます。

.test02 li {
	-webkit-background-size: 50px 50px;
	background-size: 50px 50px;
}
.test02 .red {
	background: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya01.png) center top no-repeat;
}
.test02 .blue {
	background: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya02.png) center top no-repeat;
}
.test02 .green {
	background: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya03.png) center top no-repeat;
}

すると、僕が確認した環境（Firefox14+、Chrome21+）ではbackground-sizeが効きません。
というわけで仕様書の該当の箇所を確認してみると分かりやすい事例が掲載されてますね。
body { background: red }とショートハンドを利用して背景色だけを指定したとき、省略されたその他たちはどうなるのかというのが書いてあります。
この中でbackground-sizeに注目してみるとbackground-size: auto auto;となっています。
先のbackground-sizeが効かない例では、「.test02 .red」などに指定しているbackgroundにbackground-sizeがないため、「.test02 li」に指定した「50px 50px」の値を「auto auto」で上書いているということになるわけです。

ということで注意しましょー。

元ネタ

Facebookでつぶやくといろんな方が教えてくれて便利な世の中になりましたねー。