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>? ]! ]#

ここで
<length-percentage> = <length> | <percentage>

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 4
background-position-x の定義
編集者草案 長年の実装に合わせるため、 background-position の個別指定サブプロパティを初回定義

初期値left
適用対象すべての要素
継承なし
パーセント値背景配置領域の幅から背景画像の高さを引いたものに対する相対値
計算値絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。
アニメーションの種類離散値

ブラウザーの互換性

BCD tables only load in the browser

関連情報