背景オリジンプロパティ

最終更新：2026-09-13

background-origin 背景オリジンプロパティ

background-origin は背景画像の位置決めの基準領域を設定し、background-position の基準線を決定します。デフォルトの padding-box は背景をパディング領域に対して配置し、border-box はボーダー領域、content-box はコンテンツ領域に対して配置します。background-clip と組み合わせてよく使われます。

カテゴリ
初期値	padding-box
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

background-origin: border-box | padding-box | content-box;

⚙️ 値

値	タイプ	説明
`border-box \| padding-box \| content-box`	キーワード	背景の位置決めの原点

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
background-origin	✓ v4	✓ v12	✓ v4	✓ v3.1	✓ v10
すべての主要ブラウザーでサポート

ヒント： background-origin は背景画像の開始位置に影響しますが、塗りつぶされる領域には影響しません。

ヒント： background-attachment: fixed の場合、背景はビューポートに対して位置付けられるため、background-origin は無視されます。

❓ よくある質問

Qbackground-origin と background-clip はどう連携しますか？

Aorigin は背景画像がどのボックスから配置されるかを決め、clip は背景がどこまで塗られるかを決めます。両者は独立しており、別々に設定できます。例えば background-origin: content-box; background-clip: border-box; とすると、画像はコンテンツ領域から配置されますが、ボーダーの下まで塗られます。よくある組み合わせは、両方を同じ値にして、背景が原点から完全に表示されるようにすることです。

Qbackground-origin のデフォルト値は？

Aデフォルトは padding-box で、背景画像はパディング領域の左上隅（パディング端）から配置されることを意味します。これは background-clip のデフォルトが border-box であることと異なり、両者が混同されやすい主な理由です。background-attachment: fixed の場合、背景はビューポートに対して位置付けられるため、origin は無視されます。

Qbackground-origin が視覚的な効果を持たないのはいつですか？

A3 つの場合です。画像に明示的な background-position がなくデフォルトの 0% 0% のままでは、違いを見るためにボーダーが必要です。background-attachment: fixed の場合は無視されます。また背景色だけでは何も起きません（origin は画像にのみ影響します）。効果を見るには、ボーダーと no-repeat の背景画像を追加し、3 つの値を切り替えてください。

Qbackground-origin の 3 つの値はそれぞれ何を意味しますか？

Aborder-box: 画像はボーダー領域の左上隅から配置され、ボーダーの下まで広がることができます。padding-box（デフォルト）: パディング領域の左上隅から配置されるため、ボーダーの下には画像が表示されません。content-box: コンテンツ領域の左上隅から配置されるため、画像はコンテンツ領域内に収まります。これらの値は background-position と組み合わせることで、背景画像をボックスの任意の部分に揃えることができます。