PLAY CSS
jaen

背景

background-origin

background-origin は、背景画像を置く基準の範囲（枠線の外側・内側・中身）を指定します。

構文

<visual-box>#

<visual-box> = content-box | padding-box | border-box

プレビュー

プリセット
見本
画像
右下の角をドラッグするとサイズを変えられます

コード

.box {
  background-image: url(/sample.svg);
  background-repeat: no-repeat;
  border: 16px dashed rgb(31 41 55 / 0.3);
  padding-block: 16px;
  padding-inline: 16px;
  background-origin: border-box;
}

コントロール

background-originborder-box
background-origin

解説

値の書き方

  • padding-box（初期値）：枠線の内側を基準にします。画像は枠線のすぐ内側の角から置かれます。
  • border-box：枠線の外側を基準にします。画像は枠線の下の角から置かれます。
  • content-box：内側の余白を除いた、中身の範囲を基準にします。

このページのプレビューは、補助の宣言で見本の画像を 1 枚だけ敷き（繰り返さない）、16px の半透明の破線の枠線と、16px の内側の余白を付けています。background-position は初期値の左上なので、選んだ範囲の左上の角に画像が置かれます。

位置と大きさの基準が変わる

background-origin が変えるのは、background-position で置く位置と、background-size のパーセントの基準になる範囲です。画像を繰り返すときも、この範囲から並べ始めます。背景をどこまで描くかは background-clip が決めるので、border-box を選んでも、background-clip が padding-box なら枠線の下にはみ出した部分は切り取られます。

background-attachment: fixed の背景には効きません（画面全体が基準になります）。背景色には位置が無いので、background-origin は関係しません。

background ショートハンドでの書き方

background ショートハンドに箱のキーワードを 1 つだけ書くと、 background-origin と background-clip の両方がその値になります。2 つ書くと、1 つ目が background-origin、2 つ目が background-clip です。

参考リンク

MDN Web Docsbackground-originSpecificationCSS Backgrounds Module Level 3Can I usebackground-origin

コメント

PLAY CSS