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>? ]! ]#ここで
<length-percentage> = <length> | <percentage>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 4 background-position-x の定義 |
編集者草案 | 長年の実装に合わせるため、 background-position の個別指定サブプロパティを初回定義 |
初期値 | left |
---|---|
適用対象 | すべての要素 |
継承 | なし |
パーセント値 | 背景配置領域の幅から背景画像の高さを引いたものに対する相対値 |
計算値 | 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。 |
アニメーションの種類 | 離散値 |
ブラウザーの互換性
BCD tables only load in the browser