背景画像（background-image）の設置には、background-originも指定するといい #CSS

background-imageで背景画像を表示することがありますが、このときbackground-originは使っているでしょうか？

僕はつい最近まで、paddingが効いている要素に対して配置するときは、paddingの値を変数化してbackground-positionで調整していました。
馬鹿みたいに下記のように書いてました…。
こんな便利なプロパティがあったんですね。全然知りませんでした。

.block {
  $padding: 10px;

  padding: $padding;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: $padding;
}

そんなとき、background-originなるものを知ったので、忘備録的な形でまとめておきたいと思います。

background-originについて

これは、背景配置領域を指定することができます。
上記の例のように、そのまま書くとpaddingの値を無視した形で、paddingの領域から表示されることになります。

指定できる値は、border-box, padding-box, content-boxの３つになります。

それぞれについて説明してきたいと思います。
下記のようなボックスモデルがあったとします。

.block {
  width: px;
  height: px;
  background-color: #f88;
  padding: 15px;
  border: solid 15px #333;
}

黒い線がborder、赤がcontentとなっています。
そして、content部分にはpaddingが指定されています。

通常通り画像を設置してみます。
qiitaのアイコン画像をお借りしました。
padding: 15px;を無視してそのまま表示されるので、paddingエリアにめりこんでいます。

.block {
  // 共通部分は省略


  background-image: url("");
  background-repeat: no-repeat;
}

paddingを考慮した位置が基準となり、paddingにもborderにもめりこみません。
サイズ的に中央寄せみたいな感じに見えてしまいますが、中央寄せにはなりません。
中央寄せのときは、普通にbackground-position: center;などで対応してください。

.block {
  // 共通部分は省略


  background-origin: content-box;
  background-image: url("");
  background-repeat: no-repeat;
}

背景に指定した画像は、ボーダー境界の外側までめり込みます。
少しわかりづらいかもしれませんが、こんな感じになります。

.block {
  // 共通部分は省略


  background-origin: border-box;
  background-image: url("");
  background-repeat: no-repeat;
}

指定なしと同じになります。

.block {
  // 共通部分は省略


  background-origin: padding-box;
  background-image: url("");
  background-repeat: no-repeat;
}

以上になります。
大体のブラウザにも対応しているので、とても便利だと思います。
余程古いブラウザや、珍しいブラウザのサポートがない限り問題もなさそうです。
https://caniuse.com/#feat=background-img-opts