background-positionプロパティ

値

値は1つ、または2つで指定します。1つの値であれば、水平・垂直位置を共通の値で指定します。2つの値であれば水平位置、垂直位置の順で値を指定します。

%値

要素の横幅、高さの割合に対して数値を指定します。

CSSコード例

background-position: 50% 20%;

表示例：

right top

「right」は水平方向の右寄せ（100%）指定、「top」は垂直方向の上寄せ（0%）指定になります。

CSSコード例

background-position: right top;

表示例：

left bottom

「left」は水平方向の左寄せ（0%）指定、「bottom」は垂直方向の下寄せ（100%）指定になります。

CSSコード例

background-position: left bottom;

表示例：

left center

centerは中央（50%）指定になります。この例では垂直方向の中央配置を指定しています。

CSSコード例

background-position: left center;

表示例：

center

値を1つ指定なので、水平方向・垂直方向に共通して中央配置を指定します。

CSSコード例

background-position: center;

表示例：

任意の数値

「px」や「em」などの単位で指定することも可能です。水平方向、垂直方向で異なる単位を使用できます。

CSSコード例

background-position: 10px 3em;

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。