background-origin

背景画像を置くときの原点となるボックスを決めるプロパティ。border・padding・contentのどこを左上の基準にするか比べます。

CSSの`background-origin`とは？

border-box・padding-box・content-boxをライブプレビューで切り替えながら、背景画像の配置基準、初期値、background-clipとの違いを初学者向けに解説します。

遊んでみよう

背景位置は top left・画像は繰り返しなし

CONTENT

境界線の内側から背景画像を配置します

CSS

.element background-origin: padding-box;

値のパターン

配置の基準領域 background-origin

background-originの構成要素

01background-origin

背景画像の配置領域

background-positionの基準となる領域を、ボックスモデルの3領域から選びます。

02border | padding | content

ボックスモデルの3領域

境界線、内側の余白、内容という入れ子の領域から、画像を置き始める場所を決めます。

03background-position

原点から位置を測る

top leftや数値で指定した位置は、選んだ配置領域を基準に計算されます。

早見表

初期値はpadding-boxです。背景画像を繰り返さず左上へ置くと、3つの基準領域の違いを確認しやすくなります。

01padding-box境界線の内側を基準初期値

02border-box境界線の外側を基準borderを含む

03content-box内容領域を基準paddingの内側

04content-box, padding-box背景画像ごとに基準を指定カンマ区切り

よくある使い方

アイコンを内容の左上へ揃える

paddingの大きいカードで、背景アイコンを本文の開始位置へ合わせたいときはcontent-boxを使えます。

.card { background-origin: content-box; background-position: top left; background-repeat: no-repeat; }

模様を境界線の下から始める

半透明や点線のborderの下にも背景画像を回り込ませたいときは、border-boxを基準にします。

.badge { background-origin: border-box; }

複数背景へ別々の原点を指定する

カンマ区切りの背景画像には、同じ順番で配置基準を並べ、レイヤーごとに原点を変えられます。

.hero { background-origin: content-box, padding-box; }

ポイント

originは「置く基準」、clipは「描く範囲」。

background-originは背景画像の位置を測る基準を決め、background-clipは背景をどこまで描くかを決めます。初期値はpadding-boxで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。background-attachment: fixedの背景ではbackground-originが無視されます。複数の背景画像には、カンマ区切りで画像ごとの値を指定できます。