CSS3 背景画像とグラデーションを同時に指定する

背景画像とグラデーションを同時に使用したのですがうまくいかない・・・
調べたところ「CSSで背景画像とグラデーションを同時に使う場合、画像の値を先に書かないと反映されない」ってことでした。
つまり↓の様に記述すれば良い。
CSS3の場合はプロパティの値に順番に注意が必要ですね。

CSS

.grad01{
	width:300px;
	height:72px;
	background:url(l.png) no-repeat 10% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #CCCCCC), color-stop(0.00, #ffffff));
    background:url(l.png) no-repeat 10% 50%, -webkit-linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
    background:url(l.png) no-repeat 10% 50%, linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
	border:1px solid #CCCCCC;
	margin-bottom:30px;
}

できた！

ちなみにスマホ表示用にbackground-sizeを使って画像サイズを半分にしようとしたらグラデーションまで半分になってしまった・・・
CSS

.grad02{
	width:300px;
	height:72px;
	background:url(l.png) no-repeat 10% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #CCCCCC), color-stop(0.00, #ffffff));
    background:url(l.png) no-repeat 10% 50%, -webkit-linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
    background:url(l.png) no-repeat 10% 50%, linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
	-webkit-background-size:19px 24px;
	-webkit-background-composite:
	border:1px solid #CCCCCC;
}

あらら

高解像度対応には向かないな・・・