CSS の background-position-x プロパティは、各背景画像における水平の初期位置を設定します。位置は background-origin によって設定された位置レイヤーに対する相対位置です。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティの値は、その後で一括指定の background または background-position プロパティが定義されると上書きされます。
構文
/* キーワード値 */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> 値 */ background-position-x: 25%; /* <length> 値 */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* 辺からの相対値 */ background-position-x: right 3px; background-position-x: left 25%; /* 複数の値 */ background-position-x: 0px, center; /* グローバル値 */ background-position-x: inherit; background-position-x: initial; background-position-x: unset;
background-position-x プロパティは、1つ以上の値をコンマで区切って指定します。
値
left- 背景画像の左端を、背景位置レイヤーの左端に配置します。
center- 背景画像を背景位置レイヤーの中央に配置します。
right- 背景画像の右端を、背景位置レイヤーの右端に配置します。
<length>- 指定された背景画像の水平方向の辺の、対応する背景位置レイヤーの水平方向の辺を基準としたオフセットです。辺が与えられていない場合は、左の辺を参照します。
<percentage>- 指定された背景画像の水平方向の辺の、対応する背景位置レイヤーの水平方向の辺を基準とした幅に対する相対値によるオフセットです。辺が与えられていない場合は、既定で左の辺を参照します。
形式文法
[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#where
<length-percentage> = <length> | <percentage>
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Backgrounds and Borders Module Level 4 background-position-x の定義 |
編集者草案 | 長年の実装に合わせるため、 background-position の個別指定サブプロパティを初回定義 |
| 初期値 | left |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセンテージ | refer to width of background positioning area minus height of background image |
| メディア | 視覚 |
| 計算値 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
background-position-x | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 49 | IE 完全対応 6 | Opera 完全対応 15 | Safari 完全対応 1 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 49 | Opera Android 完全対応 18 | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
| Two-value syntax (support for offsets from any edge) | Chrome 未対応 なし | Edge 完全対応 12 | Firefox 完全対応 49 | IE 完全対応 9 | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 49 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応