background-origin

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-originChrome 完全対応 1
完全対応 1
未対応 1 — 64
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 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 — 51
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Opera accepts alternate synonyms to its values: padding, border, and content.
Safari 完全対応 3
完全対応 3
完全対応 3
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit accepts alternate synonyms to its values: padding, border, and content.
WebView Android 完全対応 4.1
完全対応 4.1
未対応 4.1 — 64
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android 完全対応 18
完全対応 18
未対応 18 — 64
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android 完全対応 14
完全対応 14
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Opera Android 完全対応 11
完全対応 11
未対応 14 — 47
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS 完全対応 1
完全対応 1
完全対応 1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Webkit accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android 完全対応 1.0
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 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

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

関連情報