CSSbackground-origin プロパティは、背景配置領域、つまり background-image プロパティで指定された画像の原点の位置を指定します。

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

メモ: background 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。

構文

/* キーワード値 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* グローバル値 */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

background-origin プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

border-box
背景は境界ボックスからの相対位置になります。
padding-box
背景はパディングボックスからの相対位置になります。
content-box
背景はコンテンツボックスからの相対位置になります。

形式文法

<box>#

where
<box> = border-box | padding-box | content-box

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}
div {
  background-image: url('logo.jpg'), url('mainback.png'); /* 背景に二つの画像を適用 */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background-origin の定義
勧告候補 初回定義

初期値padding-box
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1
完全対応 1
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
完全対応 49
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
未対応 1 — 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Used the -moz-background-clip: padding | border syntax.
IE 完全対応 9
補足
完全対応 9
補足
補足 In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
Opera 完全対応 10.5
完全対応 10.5
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari 完全対応 3
完全対応 3
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
WebView Android 完全対応 4.1
完全対応 4.1
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Chrome Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Mobile 完全対応 ありFirefox Android 完全対応 14
完全対応 14
完全対応 49
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 14
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari iOS 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Samsung Internet Android 完全対応 あり
content-boxChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9
補足
完全対応 9
補足
補足 In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 4.1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 12.1Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, fscholz, Sebastianz, ethertank, sosleepy, Marsf
最終更新者: mfuji09,