background-origin

概要

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

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

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

構文

形式文法: <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 勧告候補  

ブラウザ実装状況

機能 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 をサポートしています。

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank, Marsf
最終更新者: ethertank,
サイドバーを隠す