Tweet

Pocket

従来のHTMLでは、1つの要素に対して1つしか背景画像が指定できませんでしたが、CSS3では1つの要素に対して複数の背景画像を指定することができます。

【使用例】

body {
　　background-image:url(img/sample1.jpg), url(img/sample2.jpg);
　　background-position:top left, bottom right;
　　background-repeat:no-repeat;
　　background-attachment:fixed;
　　}

background-imageプロパティで背景に指定する画像のURLをカンマで区切り複数指定します。
background-positionプロパティで画像の表示位置を指定し、background-image同様にカンマで区切り指定します。
※画像の重なり順序は、最初に指定した画像の方が上にきます。

【書式】

background-image:url(画像1のURL), url(画像2のURL);
background-position:画像1の位置, 画像2の位置;

【対応ブラウザ】
FireFox3.5以降、Opera10.6以降、Safari4以降、Chrome3以降