background-origin

ここへジャンプ:
  1. 概要
  2. 構文
  3. 例
  4. 仕様
  5. ブラウザ実装状況

概要

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

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

初期値padding-box
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序
注記: 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
background-origin の定義		 勧告候補  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,