このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

css3では、複数のbackground指定が可能になっております。

今回は3枚の画像を用意して指定する方法です。

まず、画像ですが、

背景

ハート、星

の3枚を用意します。

 

<div id="test"></div>

div#testにbackground指定

 

#test{
width:480px;
height:600px;
background: url(Heart.png), url(Star.png), url(bg.jpg);
}

,で区切り、パスの指定。この時、後でパス指定されているファイルが、

下のレイヤーに表示されます。

先にパスを記述する程、レイヤーの優先度が高いということです。

その他のリピート指定、ポジション指定もまとめて、

#test{
width:480px;
height:600px;
background: url(Heart.png), url(Star.png), url(bg.jpg);
background-repeat: repeat-x, repeat-y,no-repeat;
background-position:center,0 10px,left top;
}