background-positionの使い方
background-positionは、背景の初期位置を決める際に使われます。
background-positionプロパティの値の設定方法
| キーワード値 | top、bottom、left、right、center |
| %、px | 1つ目に左右の値、2つ目に上下の値を指定する |
表だけではわかりづらいと思うので、使用例や画像を使いながら解説したいと思います。
キーワード値
background-positionは、background-originの相対的位置を基準に設定されます。
それでは、以下のデモをご覧ください。
See the Pen QWEjemX by ryu (@ryu-no-sss) on CodePen.
このように、『top、right、bottom、left、center』でbackgroundの画像の位置を指定できます。
%、px
『%、px』の場合、以下のように、1つ目に左右の値、2つ目に上下の値を指定します。
background-position: 20% 60%;
また、『%、px』とキーワード値を一緒に使用することもできます。
以下のデモをご覧ください。
See the Pen ZEObgqW by ryu (@ryu-no-sss) on CodePen.
まとめ
・background-positionは、キーワード値または『%、px』で値を指定する。
それでは、最後まで読んでいただきありがとうございました。
タグ
