background-position-x

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>

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

形式文法

[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#
where 
<length-percentage> = <length> | <percentage>

仕様書

ブラウザーの互換性

関連情報

• background-position
• background-position-y
• background-position-inline
• background-position-block
• 複数の背景の使用