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

background-positionプロパティは、HTML要素の背景に表示される画像の開始位置を制御するためのプロパティです。このプロパティを使用することで、要素の背景に設定された画像がどこから表示されるかを正確に指定し、視覚的なデザインを調整することが可能です。

位置の指定にはいくつかの方法があります。一つは、top、bottom、left、right、centerといったキーワードを使用する方法です。これらのキーワードを一つまたは二つ組み合わせて、水平方向と垂直方向の表示位置を指定します。例えば、background-position: center top;と記述すると、背景画像は水平方向の中央、垂直方向の上部に配置されます。

もう一つの方法は、数値と単位（ピクセル px、em em、パーセンテージ %など）を用いてオフセットを指定する方法です。この場合、最初の値が水平方向、二番目の値が垂直方向のオフセットを表します。例えば、background-position: 50px 100px;と指定すると、背景画像の左上隅が要素の左端から50px、上端から100pxの位置に配置されます。パーセンテージを指定すると、要素のサイズに対する相対的な位置を決定します。

複数の背景画像が要素に設定されている場合、カンマ区切りでそれぞれの画像のbackground-position値を個別に指定することができます。このプロパティは、background-imageプロパティによって背景画像が指定されている場合に効果を発揮し、背景画像の繰り返し方（background-repeat）やスクロール時の挙動（background-attachment）といった他の背景関連プロパティと組み合わせて使用することで、要素の背景デザインを柔軟に制御することが可能になります。

Copy
1background-position: 10px 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません