タイトル: background-originプロパティ
SEOタイトル: CSS background-origin 完全ガイド（border-box / padding-box / content-box / 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 をカンマ区切りで指定できる