この記事の要点

background-origin は背景画像の配置原点（基準ボックス）を指定するプロパティ 値は padding-box（既定）/ border-box / content-box の 3 つ background-position や background-repeat はこの原点に対して計算される 混同しがちな background-clip は「背景の描画範囲」で別物 background 短縮記法で書く場合は2 つの <box> 値の 2 番目として現れる（1 つ目は background-clip）

background-origin とは

background-origin は、背景画像を「どのボックスを基準に配置するか」を決める CSS プロパティです。要素は内側からcontent（内容）→ padding（余白）→ border（枠）の 3 層の入れ子ボックスを持っており、どの層の左上を原点（0, 0）として背景を貼るかを選べます。

ボックスモデルのおさらい

┌────────────── border-box ──────────────┐
│ border                                  │
│ ┌────────── padding-box ─────────────┐  │
│ │ padding                             │  │
│ │ ┌────── content-box ──────────┐    │  │
│ │ │  content（テキスト・画像）    │    │  │
│ │ └─────────────────────────────┘    │  │
│ │                                     │  │
│ └─────────────────────────────────────┘  │
│                                          │
└──────────────────────────────────────────┘

取れる値

値	原点	使いどころ
padding-box	パディングボックスの左上（既定）	通常のレイアウト
border-box	ボーダーボックスの左上	ボーダー上にも背景を見せたい
content-box	コンテンツ領域の左上	テキストの真下からきっちり背景

基本サンプル

.box {
  width: 200px;
  height: 120px;
  padding: 20px;
  border: 10px dashed #888;

  background-image: url('/img/dot.png');
  background-repeat: no-repeat;
  background-position: top left;   /* 原点に対する 0,0 */
}

.box.a { background-origin: padding-box; } /* 既定 */
.box.b { background-origin: border-box;  }
.box.c { background-origin: content-box; }

同じ background-position: top left でも、border-box ではボーダーの内側左上、content-box ではコンテンツ領域の左上が「0, 0」となり、表示位置が変わります。

background-clip との違い

名前も値も似ていて混乱しやすいですが、役割は別です。

プロパティ	意味
background-origin	背景画像の配置の起点（どこから貼るか）
background-clip	背景の描画される範囲（どこまで見えるか）

原点と描画範囲を別々に指定

.box {
  padding: 20px;
  border: 10px solid rgba(0,0,0,0.2);

  background: url('/img/pattern.png') top left no-repeat;

  /* コンテンツ基準で貼るが、ボーダーまで見せる */
  background-origin: content-box;
  background-clip:   border-box;
}

background 短縮記法での書き方

background 短縮記法の中で <box> 値を2 つ書くと、最初が background-origin、次が background-clip として解釈されます（順序固定）。1 つだけ書いた場合は両方に同じ値が設定されます。

/* 1 つ書き → origin と clip 両方に適用 */
.a { background: url(x.png) padding-box; }

/* 2 つ書き → origin / clip の順 */
.b { background: url(x.png) content-box border-box; }
/*                              ↑ origin   ↑ clip   */

注意点

• background-attachment: fixed の場合、原点はビューポートになるため background-origin の指定は無視される
• 背景が純粋なカラー（画像なし）の場合、見た目に違いは出ない（カラーの塗りつぶしは background-clip 側で決まる）
• カンマ区切りで複数背景を持つ場合、それぞれの origin をカンマ区切りで指定できる

関連

• 背景 — 親カテゴリ
• backgroundプロパティ
• background-colorプロパティ
• background-imageプロパティ
• background-clipプロパティ
• background-repeatプロパティ
• background-sizeプロパティ
• background-positionプロパティ
• background-attachmentプロパティ