background-positionで背景画像を表示位置を指定【CSS】

background-positionは背景画像を表示するときの水平位置・垂直位置を指定するプロパティです。

{background-position: 位置;}

背景画像はbackground-imageプロパティで指定できます。

background-positionの値の指定方法

background-positionプロパティでは、背景画像の表示位置を指定する値は1つ、または半角スペースで区切って2つ指定できます。

値を1つ指定する場合は、水平位置と垂直位置がその値によって指定され、値を2つ指定する場合は水平位置・垂直位置という順番で指定にされることになります。

background-positionプロパティで指定できる値には以下のようなものがあります。

%値を指定すると、背景画像を表示する領域と画像のサイズに対して、それぞれの割合が一致する位置に表示されます。

たとえば、「10% 50%」という風に指定したとすると、領域の左端から10%、上端から50%の位置に、画像の左端から10%、上端から50%の位置が一致する位置に表示されます。

また、単位をつけた数値で指定することもできます。

このとき指定するのは、背景画像を配置する領域の左上からの距離のこと。

たとえば、「5px 10px」と指定すると、左端から5px、上端から10pxの位置に表示されます。

指定する単位については、『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』の記事を参考にしてください。

位置を表すキーワードで指定することもできます。

topを指定するのは、垂直0%と同じ意味です。

bottomを指定するのは、垂直100%と同じ意味です。

leftを指定するのは、水平0%と同じ意味です。

rightを指定するのは、水平100%と同じ意味です。

centerを指定するのは、水平50%・垂直50%と同じ意味です。