background-position-x

ジャンプ先:
  1. 構文
  2. 仕様書
  3. ブラウザーの対応
  4. 関連情報

CSS の background-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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 49IE 完全対応 6Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 49Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
Two-value syntax (support for offsets from any edge)Chrome 未対応 なしEdge 完全対応 12Firefox 完全対応 49IE 完全対応 9Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, momdo
最終更新者: mfuji09,