複数の背景画像

CSS3から要素に対し複数の背景画像を適用できるようになりました。cssの書き方は、各背景画像をカンマで区切って羅列します。最初に指定した背景が最前面に、最後に指定した背景が最背面になるように重ねて表示されます。同時に繰り返し方法及び位置も同様にカンマで区切って指定します。

要素 {
　background-image: 背景1, 背景2, ..., 背景N;
　background-repeat:背景1の繰り返し方, 背景2の繰り返し方, ..., 背景Nの繰り返し方;
　background-position:背景1の位置, 背景2の位置, ..., 背景Nの位置;
}

「images」フォルダーの下記3画像を高さ100pxのヘッダ-に配置するには

majyo2.gif

majyo2r.gif

top_wall.gif

SCCは下記のようになります。

div#header{
width: 100%;
height: 100px;
background-image: url('../img/majyo2.gif'),url('../img/majyo2r.gif'),url('../img/top_wall.gif');
background-repeat: no-repeat,no-repeat,repeat;
background-position: 5% center,95% center;
}

結果