戻る
3枚以上の背景画像を表示する
背景画像は、「,（カンマ）」で区切って指定することにより、何枚でも表示することができます。たとえば次のサンプルでは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ピクセル）。