background-origin プロパティ
background-origin プロパティは、
背景画像（画像のみ、塗りつぶしは含まない）が
要素に対してどのように配置されるかを設定します：
背景画像の一部が枠線の下に入り込むか、
背景が枠線の下に入り込まないか、
または背景が要素の内容部分（つまり
padding
によって背景が押しやられる部分）のみに配置されるか。
構文
セレクタ {
background-origin: padding-box | border-box | content-box;
}
値
| 値 | 説明 |
|---|---|
border-box |
背景画像が枠線の下に入り込みます。 |
padding-box |
背景画像が枠線の下に入り込みません。 |
content-box |
背景画像が内容部分のみに配置されます。 |
デフォルト値: padding-box。
備考
background-origin プロパティは、
background-attachment
が fixed の値を持つ場合には機能しません。また、
background-repeat
が repeat の値を持つ場合、
background-origin プロパティは常に
border-box の値が指定された場合と同様に動作します。
例 . デフォルト
デフォルトでは、背景は枠線の下に入り込みません：
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
例 . border-box 値
ここでは背景が枠線の下に入り込みます：
<div id="elem"></div>
#elem {
background-origin: border-box;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
例 . content-box 値
今度は背景が padding によって押しやられます：
<div id="elem"></div>
#elem {
background-origin: content-box;
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
例 . background-repeat: repeat の場合
background-repeat が repeat の値を持つ場合、
background-origin プロパティは常に
border-box の値が指定された場合と同様に動作します。
つまり、背景は常に枠線の下に入り込みます：
<div id="elem"></div>
#elem {
background-repeat: repeat;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 350px;
height: 300px;
}
:
関連項目
-
背景画像と塗りつぶしの両方の位置を設定する
background-clipプロパティ
-
背景に関する一括指定プロパティである
backgroundプロパティ
