概要
CSS の background-origin プロパティは背景配置領域を決めます。背景配置領域は CSS の background-image プロパティで指定された画像の原点の位置です。
background-attachment が fixed のときは background-origin は無視されることに注意してください。
注記:
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 をサポートしています。
関連情報
- 背景関連 CSS プロパティ :
background、background-attachment、background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size