背景画像は、「,(カンマ)」で区切って指定することにより、何枚でも表示することができます。たとえば次のサンプルでは5枚の背景画像を用意して、それぞれ表示位置と大きさを調節して表示しています。
/* コンテナ */ div#container {width: 900px; margin-left: auto; margin-right: auto; background-color: #ffffff; padding:0 40px; -webkit-box-shadow: 0px 0px 50px #bbbbbb; box-shadow: 0px 0px 10px #666666; background-image: url(circle.png), url(circle-yellow.png), url(circle-sky.png), url(circle-pink.png), url(circle-red.png); background-repeat: no-repeat; background-position: 15px 420px, 90px 500px, 150px 545px, 260px 526px, 10px 532px; background-size: 94px 94px, 30px 30px, 50px 50px, 35px 35px, 25px 25px}
ここでは、色違いの円を描いた150×150ピクセルの画像を5枚用意しています。
緑色を描いた画像
circle.png
(150×150ピクセル)。
黄色を描いた画像
circle-yellow.png
(150×150ピクセル)。
水色を描いた画像
circle-sky.png
(150×150ピクセル)。
ピンク色を描いた画像
circle-pink.png
(150×150ピクセル)。
赤色を描いた画像
circle-red.png
(150×150ピクセル)。