複数の背景画像を設置

複数の背景画像を設置するには、「background-image」に画像のURLを「,（カンマ）」で区切って指定します。
位置「background-position」及び繰り返し「background-repeat」についても画像の指定順どおりに「,（カンマ）」で区切って指定します。

div{
　　background-image: url(images/○○○.png), url(images/△△△.jpg);
　　background-position: left top, left bottom;
　　background-repeat: no-repeat, repeat;
}

背景画像の表示位置は100px 200pxとすると左側から100ピクセル、上から200ピクセルの位置になります。また、top leftのように指定すると左上に、bottom rightとすると右下に背景画像が表示されます。left 100pxと指定した場合は背景画像は左側に(0px)なり、上から100ピクセルの位置に表示されます。

また、「backgroud」プロパティを使用して一括指定で記述をすると表示が正常に行われませんので、それぞれ個別のプロパティを使用して記述します。

実施例

下記4画像をimageフォルダーに準備

画像１
1.gif
画像2
2.gif
画像3
3.gif
画像4
4.gif

HTMLではボックスを作りテキストのみを記載

<div id="sample"><p>4画像を背景画像としてボックスの四隅に配置しました</p></div>

CSSで下記のとおり指定

div#sample{
　background-image: url(image/1.gif), url(/image/2.gif),url(image/3.gif),url(image/4.gif);
　background-position: left top, left bottom,right top, right bottom;
　background-repeat: no-repeat, no-repeat,no-repeat,no-repeat;
　background-color : aqua;
　width : 400px;
　height : 200px;
}

結果

4画像を背景画像としてボックスの四隅に配置しました

戻る