【CSS3】背景画像を複数指定する(background)
従来の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以降
コメントを残す