【CSS Modules】background-position-yプロパティの使い方
background-position-yプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
background-position-yプロパティは、要素の背景画像の垂直方向における初期位置を保持するプロパティです。このプロパティを使用すると、背景画像を要素内で上下方向のどこに配置するかを詳細に制御できます。指定できる値は、キーワード、長さの値、またはパーセンテージです。
キーワードの場合、「top」は画像を要素の上端に、「center」は垂直方向の中央に、「bottom」は下端に配置します。長さの値、例えば「50px」や「5em」を指定すると、その値だけ上端から下にオフセットされた位置に画像が配置されます。パーセンテージの場合、例えば「50%」と指定すると、背景画像の垂直方向の中央が要素の垂直方向の中央に配置されます。この値は、画像の特定の点（0%で上端、100%で下端）と、要素の対応する点との位置関係を相対的に調整するために使用されます。負の値も指定可能で、要素の境界の外側に画像を配置することもできます。
このプロパティは、通常、background-position というショートハンドプロパティの一部として使われることが多いですが、背景画像の垂直方向の位置のみを個別に調整したい場合に非常に便利です。例えば、ウェブサイトのヘッダー部分に表示するロゴ画像や、特定のセクションの背景画像を意図した場所に正確に配置したい場合に活用されます。background-position-x プロパティと組み合わせることで、背景画像を要素内の任意の位置に配置する柔軟な制御が可能になり、多様なデザイン要件に応じた、視覚的に魅力的なウェブページを作成できるようになります。
構文(syntax)
1.element { 2 background-position-y: 50%; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません