CSS background-position-x 属性

定義と使用法

background-position-x 属性は背景画像のx軸上の位置を設定します。

ヒント：デフォルトでは、背景画像は要素の左上隅に配置され、垂直および水平方向に繰り返されます。

例

例 1

x軸上で背景画像をどう位置付けるか：

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

自分で試してみる

例 2

背景画像を右側にどう位置付けるか：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

自分で試してみる

例 3

パーセントを使用して背景画像をどう位置付けるか：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

自分で試してみる

例 4

ピクセル位置を使用して背景画像をどう使うか：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

自分で試してみる

例 5

異なる背景属性を使用して、コンテナを覆う背景画像を作成します：

.hero-image {
  background-image: url("photographer.jpg"); /* 使用の画像 */
  background-color: #cccccc; /* 画像が利用できない場合に使用する色 */
  height: 300px; /* 高さを設定する必要があります */
  background-position-x: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像を繰り返し表示しない */
  background-size: cover; /* 背景画像のサイズを全体に覆うように調整 */
}

自分で試してみる

CSS 语法

background-position-x: value;

属性値

値 説明
left 背景をx軸の左側に定位します。
right 背景をx軸の右側に定位します。
center 背景をx軸の中心に定位します。
x%

x軸の左側は0%、右側は100%です。

百分比值は、背景定位エリアの幅から背景画像の幅を引いた値です。
xpos 左側の水平距離。単位はピクセル（例：0px）や他のものができます CSS 単位。
xpos offset

二値構文、Firefoxとサファリでサポートされています。

  • xpos leftやrightに設定してください
  • offset 背景画像とxpos設定の左側または右側の水平距離

単位はピクセルや他のものができます CSS 単位。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性を親要素から継承します。参照してください： inherit。

技術的詳細

デフォルト値： 0%
継承性： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.backgroundPositionX="center"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
単値構文 1.0 12.0 49.0 1.0 15.0
二値構文 非サポート 非サポート 49.0 15.4 非サポート

関連ページ

チュートリアル：CSS 背景

CSS 参考：background-image 属性

CSS 参考：background-position 属性

CSS 参考：background-position-y 属性

HTML DOM 参考：backgroundPosition 属性