背景画像を複数設定する

ビジュアルデザインでよく対角線上に要素を配置して枠っぽくする表現があるわけだけど、CSSの画像でそれをやろうとする場合の実現方法。

.foo {
        background-image: url(images/XXX.png), url(images/YYY.jpg);
        background-position: left top, right bottom;
        background-repeat: no-repeat, no-repeat;
        background-size: 100px 50px, 20%;
}

ぶっちゃけ、各backgroundプロパティー内でカンマで区切って設定すればOK。
backgroundプロパティーによる一括で設定は不可。

因みに上下だと先に記述した方が上になる。

【追記】
用語のご指摘ありがとうございます