background-origin:背景画像の配置領域

概要

“background-origin”プロパティは“background-image”プロパティなどで指定された背景画像の配置領域を指定するプロパティです。“background-position”プロパティで背景画像の配置位置を指定するときに原点の位置に影響します。

“background-attachment”プロパティの値が“fixed”である場合は“background-origin”プロパティでの指定は無視され、背景画像の配置位置の基準はルート要素の外縁(通常はビューポート)となります。

サンプルコード

値

複数の背景画像を指定する

“background-image”プロパティで複数の背景画像が指定されている場合、値を“,(カンマ)”で区切って記述することでそれぞれの背景画像の配置領域を指定することができます。値の順番は“background-image”プロパティで指定した値の順番に対応します。

仕様書

background-origin

padding-box
border-box
content-box

パディング・ボックスを基準とする

div {

padding: 10px;
border: 10px dotted;
background-repeat: no-repeat;
background-origin: padding-box;

}

ボーダー・ボックスを基準とする

div {

padding: 10px;
border: 10px dotted;
background-repeat: no-repeat;
background-origin: border-box;

}

コンテンツ・ボックスを基準とする

div {

padding: 10px;
border: 10px dotted rgb(204,153,204);
background-repeat: no-repeat;
background-origin: content-box;

}

複数の背景画像を指定する

div {

padding: 10px;
border: 10px dotted rgb(204,153,204);
background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: no-repeat;
background-origin: border-box,content-box;

}