background-position-x
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
* Some parts of this feature may have varying levels of support.
background-position-x は CSS のプロパティで、各背景画像における水平の初期位置を設定します。位置は background-origin によって設定された位置レイヤーに対する相対位置です。
このプロパティの値は、その後で一括指定の background または background-position プロパティが定義されると上書きされます。
試してみましょう
background-position-x: left; background-position-x: center; background-position-x: 25%; background-position-x: 2rem; background-position-x: right 32px; <section class="display-block" id="default-example"> <div class="transition-all" id="example-element"></div> </section> #example-element { background-color: navajowhite; background-image: url("/shared-assets/images/examples/star.png"); background-repeat: no-repeat; height: 100%; } 構文
/* キーワード値 */ 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-
背景画像を背景位置レイヤーの方向の中央に配置します。
right-
背景画像の右端を、背景位置レイヤーの右端に配置します。
<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
<div></div> 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
<div></div> 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 Module Level 4 # background-position-longhands |