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 にも適用されます。 |
継承 | なし |
メディア | 視覚 |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-origin | Chrome
完全対応
1
| Edge 完全対応 12 | Firefox
完全対応
4
| IE
完全対応
9
| Opera
完全対応
10.5
| Safari
完全対応
3
| WebView Android
完全対応
4.1
| Chrome Android
完全対応
18
| Firefox Android
完全対応
14
| Opera Android
完全対応
11
| Safari iOS
完全対応
1
| Samsung Internet Android 完全対応 1.0 |
content-box | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 4 | IE
完全対応
9
| Opera 完全対応 10.5 | Safari 完全対応 3 | WebView Android 完全対応 4.1 | Chrome Android 完全対応 18 | Firefox Android 完全対応 14 | Opera Android 完全対応 11 | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。