CSS の background-origin プロパティは、背景配置領域、つまり background-image プロパティで指定された画像の原点の位置を指定します。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
background-attachment が fixed のときは 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>#
例
.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 |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 4.1 | あり | あり | 14 | 12.1 | あり | あり |
content-box | 4.1 | あり | あり | 14 | 12.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.