background-position-x

CSSbackground-position-x プロパティは、各背景画像における水平の初期位置を設定します。位置は background-origin によって設定された位置レイヤーに対する相対位置です。

このプロパティの値は、その後で一括指定の 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
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-position-xChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 49IE 完全対応 6Opera 完全対応 15Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 49Opera Android 完全対応 18Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Two-value syntax (support for offsets from any edge)Chrome 未対応 なしEdge 完全対応 12Firefox 完全対応 49IE 完全対応 9Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報