HTML & CSS

リファレンス

CSS

バックグラウンド ポジション

background-positionプロパティ

背景画像の表示位置について水平・垂直で指定します。

  • 初期値

    0% 0%(左上)

  • 継承

    不可

  • 適用できる要素

    全要素

値は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;

表示例:

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。