書式
background-origin : 表示方法;
background-origin : 背景画像1の開始位置, 背景画像2の開始位置,...;
説明
背景画像の表示開始位置を指定するにはbackground-originを使います。background-originには3つの方法を指定できます。
border-boxを指定すると枠の一番外側から表示が開始されます。
padding-boxを指定すると枠の内側から表示が開始されます。
content-boxを指定するとパディング領域の内側から表示が開始されます。
background-clipはベンダープレフィックスは不要です。IE9より前のバージョンは未対応ですので使えません。
p {
width: 400px;
height:200px;
border:20px solid rgba(255,0,0,0.25);
padding: 10px;
background-image: url(sunflower.jpg);
background-repeat: no-repeat;
}
#type1 { background-origin: border-box; }
#type2 { background-origin: padding-box; }
#type3 { background-origin: content-box; }
目次に戻る