background-position-x

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

試してみましょう

このプロパティの値は、その後で一括指定の background または background-position プロパティが定義されると上書きされます。

構文

css
/* キーワード値 */
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: revert;
background-position-x: revert-layer;
background-position-x: unset;

background-position-x プロパティは、1 つ以上の値をカンマで区切って指定します。

値

left

背景画像の左端を、背景位置レイヤーの左端に配置します。

center

背景画像を背景位置レイヤーの方向の中央に配置します。

背景画像の右端を、背景位置レイヤーの右端に配置します。

<length>

指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。

<percentage>

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

公式定義

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

形式文法

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

<length-percentage> = 
  <length>      |
  <percentage>

例

基本的な例

次の例は、シンプルな背景画像の実装で、 background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

結果

辺からの相対値

次の例は、辺からの相対オフセット構文に対応していることを示すもので、開発者は背景を任意の辺からオフセットすることができます。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 4
# background-position-longhands

ブラウザーの互換性

BCD tables only load in the browser

関連情報