書式
background-position: 背景画像1の位置, 背景画像2の位置,...,背景画像nの位置;
説明
複数の背景画像の表示位置を指定するにはbackground-positionを使います。背景画像が複数ある場合には,（カンマ）で区切って背景画像の表示位置を指定します。
背景画像の表示位置は100px 200pxとすると左側から100ピクセル、上から200ピクセルの位置になります。また、top leftのように指定すると左上に、bottom rightとすると右下に背景画像が表示されます。left 100pxと指定した場合は背景画像は左側に(0px)なり、上から100ピクセルの位置に表示されます。
背景画像の数に対して背景画像の位置指定の数が不足している場合には、背景画像の位置はbackground-repeatで最初に指定された位置に設定されます。
p {
width: 600px;
height:500px;
border:1px solid red;
color: white;
background-color: gray;
background-repeat: no-repeat;
background-image: url(flower.jpg), url(sunflower.jpg), url(matsumoto.jpg);
background-position: top left, 200px 100px, right 300px;
}
目次に戻る