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 にも適用されます。
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応111242 39410.531
content-box112429510.531
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.1 あり あり1412.1 あり あり
content-box4.1 あり あり1412.1 あり あり

1. 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.

2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. Since Firefox 49, also supports the -webkit prefixed version of the property.

4. 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.

5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.

関連情報

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

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