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

background-origin

背景画像の座標原点をどのボックスの端に合わせるかを制御します。デフォルトの padding-box では、パディングの左上隅から背景が始まります。border-box にするとボーダーの下にも背景が描画され、content-box にするとコンテンツ領域のみに配置されます。background-clip と組み合わせて使用することが多いです。

背景配置基準

概要

背景画像の座標原点をどのボックスの端に合わせるかを制御します。デフォルトの padding-box では、パディングの左上隅から背景が始まります。border-box にするとボーダーの下にも背景が描画され、content-box にするとコンテンツ領域のみに配置されます。background-clip と組み合わせて使用することが多いです。

対応ブラウザ

デスクトップ

Chrome 21+
Edge 12+
Safari 5.1+
Firefox 22+

モバイル

Chrome Android 25+
Safari iOS 4+
Firefox Android 22+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク