bodyのbackgroundへ複数の画像を貼り付けてみましょう。
背景に画像を複数枚貼り付ける。
スタイルシートのソースは、こういう書き方になります。
cssソース
/*====参考====*/
body {
background: url("./images/s256_f_health_11_0bg.png") no-repeat 53% 180px, /*1枚目の画像*/
url("./images/s256_f_health_11_0bg.png") no-repeat 50% 140px, /*2枚目の画像*/
url("./images/s256_f_health_36_0bg.png") no-repeat 47% 100px; /*3枚目の画像*/
}
それでは見ていきましょう。
画像を1枚、2枚、3枚、合計3枚の画像を配置しました。
1枚目の画像の後ろは,になっています。
2枚目の画像の後ろも,になっています。
画像1枚目と2枚目と3枚目は,を介して繋がっています。
,で何枚でも繋げることができます。
3枚目は最後の画像なので;で終わっています。
さて、1枚目の画像はno-repeat 53% 100px, で終わっていますがこれは、繰り返しなし、左から幅の53%上から100pxの位置に画像を配置しなさい、という指定になります。
2枚目の画像はno-repeat 50% 100px, で終わっており、1枚目と同じく繰り返しなし、左から幅の50%上から100pxの位置に画像を配置しなさい、という指定になります。
3枚目の画像はno-repeat 47% 100px; で終わっており、1、2枚目と同じく繰り返しなし、左から幅の47%上から100pxの位置に画像を配置しなさい、という指定になります。
画像2枚を同じ画像にして、3枚重なった配置にしました。
よく見ると、1枚目に書いた画像が上、2枚目に書いた画像が真ん中、3枚目に書いた画像が一番下になって表示されます。
順番を間違えないようにしましょう。