CSS3では、背景画像を複数指定できるようになりました。これにより、表現の幅が更に広がりそうですね。
記述例は以下のようになります。

.sample {
  background:
    url(bg01.png) left top no-repeat,
    url(bg02.png) right bottom no-repeat;
}

この場合の背景画像の重なり順ですが、先に記述された画像が上になります（記述例の場合、bg01.pngが上になりますね）。

また、記述の仕方として各プロバティ毎に書き分けるという方法もあるようです。
例えば、先程の記述例を書き換えると以下のようになりますね。

.sample {
  background-image:
    url(bg01.png),
    url(bg02.png);
  background-position:
    left top,
    right bottom;
  background-repeat:
    no-repeat,
    no-repeat;
}

というわけで、実際に背景画像の複数指定をやってみたいと思います。

HTMLは以下のように記述します（といってもdivが一つあるだけです）。

<div class="sample1"></div>

お次はCSSですね。以下のように記述し、4枚の背景画像を指定してみます。

.sample1 {
  width: 750px;
  height: 450px;
  margin: 0 auto;
  background:
    url(images/css007/bg_ramen.jpg) left top no-repeat,
    url(images/css007/bg_takoyaki.jpg) 150px 50px no-repeat,
    url(images/css007/bg_pasta.jpg) 300px 100px no-repeat,
    url(images/css007/bg_sashimi.jpg) 450px 150px no-repeat;
}

はい、すると結果は以下のようになります。

レイヤー重なり順が分かりやすくなるよう、background-positionを調整してみました。
先程の説明にもあったように、重なり順は記述順ということになりますので、今回の場合ですと…
ラーメン、たこ焼き、パスタ、刺し身という順番になりますね。