background-origin プロパティ

background-origin プロパティは、 背景画像（画像のみ、塗りつぶしは含まない）が 要素に対してどのように配置されるかを設定します： 背景画像の一部が枠線の下に入り込むか、 背景が枠線の下に入り込まないか、 または背景が要素の内容部分（つまり padding によって背景が押しやられる部分）のみに配置されるか。

構文

cssセレクタ {
  background-origin: padding-box | border-box | content-box;
}

値

デフォルト値: padding-box。

備考

background-origin プロパティは、 background-attachment が fixed の値を持つ場合には機能しません。また、 background-repeat が repeat の値を持つ場合、 background-origin プロパティは常に border-box の値が指定された場合と同様に動作します。

例 . デフォルト

デフォルトでは、背景は枠線の下に入り込みません：

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

例 . border-box 値

ここでは背景が枠線の下に入り込みます：

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

例 . content-box 値

今度は背景が padding によって押しやられます：

html<div id="elem"></div>

css#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 の値が指定された場合と同様に動作します。 つまり、背景は常に枠線の下に入り込みます：

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

関連項目