【CSS Modules】background-position-xプロパティの使い方

background-position-xプロパティは、HTML要素に適用される背景画像の水平方向（X軸方向）の位置を制御・保持するプロパティです。このプロパティを使用すると、ウェブページ上で要素の背景に表示される画像を、左右のどの位置に配置するかを具体的に指定できます。

設定できる値には、背景画像を要素の左端に揃えるleft、中央に揃えるcenter、右端に揃えるrightといったキーワードがあります。また、10pxや2emのように具体的な長さを指定することで、要素の左端から背景画像の左端までのオフセット距離を設定できます。さらに、50%のようなパーセンテージを指定することも可能です。パーセンテージで指定した場合、背景画像の幅と背景が表示される要素の幅の両方に基づいて、相対的な位置に画像が配置されます。例えば、0%は要素の左端、100%は右端、50%は中央に画像を揃えることを意味します。

このbackground-position-xプロパティは、background-positionというショートハンドプロパティの一部を構成しています。background-positionが背景画像の水平方向と垂直方向（Y軸方向）の両方の位置をまとめて設定するのに対し、background-position-xは水平方向の位置のみに特化しています。垂直方向の位置を個別に調整したい場合は、background-position-yプロパティを使用します。

ウェブサイトのデザインにおいて、背景画像を正確な位置に配置したい場合や、背景画像を左右に動かすような視覚効果（アニメーションなど）を実現したい場合に、このプロパティが非常に有効です。特定の要素の視覚的な表現を細かく調整する際に役立ちます。

Copy
1background-position-x: 50%;

引数なし

引数はありません

戻り値なし

戻り値はありません