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>
指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の右端が、コンテナーの右端の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。

形式文法

[ 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 未対応 12 — 79Firefox 完全対応 49IE 完全対応 9Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

関連情報