[CSS]backgoundでグラデーションと背景画像を同時に指定する方法

スタイルシートのbackgroundは「見出しタグを画像でリッチに表現する方法」でも利用しましたが、使用する機会の多い便利なプロパティです。

今回、背景色をグラデーションにして、背景上にアイコンを表示するというデザインを作りたかったので、いつもの背景一色で指定する時と同様に以下のように書いてみたところ・・・、表示されないという自体が発生しました。

background:
    -webkit-gradient(linear, left top, right bottom, from(#0ca4eb),
        color-stop(50%, #0ca4eb),
        color-stop(75%, #81d0f5),
        color-stop(85%, #c4e9fa),
        to(#c4e9fa)),
    url("../images/logo.png") 260px 0 no-repeat;

背景を単色で指定する場合なら、以下のように書けば表示されるので、グラデーションの場合も同じだと思っていたのですが、違っていたようです。

background: #f00 url("../image/logo.png") 260px 0 no-repeat;

背景色と表示画像の順番を入れ替えても表示されます。

background: url("../image/logo.png") 260px 0 no-repeat #f00 ;

正しくは「1.背景画像の指定、2.グラデーション」の順で記述しなければ正しく表示されないようです。

background:
    url("../images/logo.png") 260px 0 no-repeat,
    -webkit-gradient(linear, left top, right bottom, from(#0ca4eb),
        color-stop(50%, #0ca4eb),
        color-stop(75%, #81d0f5),
        color-stop(85%, #c4e9fa),
        to(#c4e9fa));

スタイルシート、本当に便利です。
本日は以上です。