Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

background-origin

background-origin は CSS のプロパティで、背景配置領域を境界の開始位置、境界の内部、パディングの内部から設定します。

background-attachment が fixed のときは background-origin が無視されることに注意してください。

背景配置基準

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-origin
1
12
4
3
18
1
border-box
1
12
4
3
18
2
content-box
1
12
4
3
18
1
padding-box
1
12
4
3
18
2
background-origin

'background-origin' 手書きの値
21
12
22
5.1
25
4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
  • Chrome は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
実装メモ
  • Edge 79 以降、その値に対して代替の同義語である `padding`、`border`、および `content` が受け入れられます。
注釈 5件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (1)
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (4)
実装メモ
  • `-moz-background-clip を使用しました。 border` 構文。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
実装メモ
  • Webkit は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
  • Chrome Android は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
  • Webkit は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。

基本構文

CSS 
.element {
  background-image: url('pattern.png');
  background-origin: content-box;
  padding: 20px;
}

ライブデモ

Padding-box(default)

CSS Padding-box(default) demo.

プレビュー全画面表示

border-box

CSS Border-box demo.

プレビュー全画面表示

content-box

CSS Content-box demo.

プレビュー全画面表示

実務での使いどころ

  • 背景画像の配置基準の調整

    パディング付きの要素で背景パターンをコンテンツ領域に合わせて正確に配置し、余白との整合性を保てます。

注意点

  • background-attachment: fixed が設定されている場合、background-origin は無視されます。両者の併用には注意が必要です。

アクセシビリティ

  • 背景の配置基準変更は装飾的な変更であり、アクセシビリティに直接影響しません。ただし、背景がコンテンツの可読性に影響しないことを確認してください。

参考リンク