書式
background-image: url(背景画像1のURL), url(背景画像2のURL),...,url(背景画像nのURL);
説明
複数の背景画像を指定するにはbackground-imageを使います。url()を使って背景画像を指定します。従来のスタイルシートではurl()は1つしか設定できませんでした。複数の背景画像を指定する場合には,(カンマ)で区切り、url()で背景画像のURLを指定します。背景画像にしたい数だけいくつでも指定することができます。
複数指定した場合、最初に指定した画像が一番手前に表示されます。最後に指定したものほど奥に表示されます。また、背景を繰り返し表示すると一番最初に指定したものが繰り返し表示されてしまいます。背景の繰り返しはno-repeatにするかrepeat-x, repeat-yなどを指定しておく必要があります。
また、背景画像の位置はbackground-positionで指定することができます。この場合も,（カンマ）で区切って複数の背景画像の位置を設定することができます。(詳しくは
こちらのページへ)
p {
width: 300px;
height:300px;
border:1px solid red;
color: white;
background-color: gray;
background-repeat: no-repeat;
background-image: url(flower.jpg), url(sunflower.jpg), url(matsumoto.jpg);
}
目次に戻る