Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-origin

概要

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

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

初期値padding-box
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序
注記: background-origin プロパティに値をセットした後にショートハンドプロパティ background を呼び出し、background-origin に該当する値をセットしなかった場合、ショートハンドプロパティによって初期値にリセットされます。

構文

形式文法: <box>#

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

background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-origin: inherit

border-box
背景はボーダー境界の外側まで引き伸ばされます(ただし z-オーダーでボーダーより奥になります)。
padding-box
ボーダーの下には背景が描かれません(背景はパディング境界の外側まで引き伸ばされます)。
content-box
背景はコンテンツボックスの内部に(クリップされて)描かれます。

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  /* パディングの内側まで背景が描かれます */ 
  background-origin: content-box;
}
div {
  background-image: url('logo.jpg'), url('mainback.png');
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}
background-origin: border | padding | content

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
The definition of 'background-origin' in that specification.
勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 未サポート 3.0 (522) [3]
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?
content-box ? ? ? ? ?

[1] Gecko のバージョン 1.1 から 1.9.2 までは、Firefox 1.0 から 3.6(を含む)に相当する、プレフィックスつきの別の構文をサポートしていました: -moz-background-origin: padding | border

[2] Internet Explorer のバージョン 7 までは、background-origin: border-box; であるかのような挙動をします。Internet Explorer 8 は background-origin: padding-box; であるかのような挙動をします。これは正規のデフォルト値です。

[3] Webkit もプレフィックス版をサポートしていますが、いまのキーワードに加えて、別名を追加しています: padding, border, content

[4] Konqueror 3.5.4 は -khtml-background-origin をサポートしています。

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

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