CSS

【background-position】背景画像の配置位置

みいと

background-positionで背景画像の配置位置を設定する

background-positionプロパティを使用すると、背景画像の配置位置を設定することができます。
画像が繰り返される場合には、background-positionで配置した場所から繰り返されます。

background-positionプロパティには下記のキーワードや値を指定できます。

  • 単位つきの数値
  • パーセンテージ
  • top
  • bottom
  • center
  • left
  • right

値は通常半角スペース区切りで2つ指定し、初期値は 0% 0%です。
数値やパーセンテージの指定の場合は、1つ目は横方向の位置、2つ目は縦方向の位置になります。

使用頻度の高そうな指定方法を、以下にまとめます。

基準領域の左上を指定する

基準領域の左上を指定する場合は、下記のような指定方法があります。

  • 0px 0px
  • 0% 0%
  • top left

基準領域の中央を指定する

基準領域の中央を指定する場合は、下記のような指定方法があります。

  • 50% 50%
  • center center

基準領域の右下を指定する

基準領域の右下を指定する場合は、下記のような指定方法があります。

  • 100% 100%
  • right bottom

単位つきの数値で指定する

単位つきの数値は横方向は左から背景画像の左の距離、縦方向は上から背景画像の上の距離を指定します。

パーセンテージの場合は表示領域のパーセンテージと、背景画像のパーセンテージが一致する場所に配置されます。
チョットわかりにくいですが、下記の図のようなイメージです。

パーセント指定の例

背景画像の配置位置のまとめ

今回は背景画像の配置位置についてまとめました。
背景画像を自分の意図した場所に配置できれば、色々なデザインもできそうですね。

まとめ

  • background-positionを使用すると、背景画像の配置位置を設定できる
  • 値は半角スペース区切りで2つ指定する
  • 値が数値やパーセンテージの指定の場合、1つ目は横方向の位置、2つ目は縦方向の位置になる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました