【CSS】背景画像の位置を変えたい場合はbackground-positionを使う!

background-imageで設定した背景画像の位置を変えたい場合は多々ある。

たとえば↓のような場合

背景画像左上

この空の写真をど真ん中に持っていきたい!

そういう時に使えるのが

background-positionだ。

背景画像の位置を変えるのだから、

なんでbackground-image-positionの方が正確な気がするのだが、、、(笑)

まぁ背景で位置を設定するのは画像しかないからimageを省いたのだろう(たぶん、、、)

今回はわかりやすいようにbody自体に背景画像を設定してみた。
→通常はclassで設定するのが通常だろう。

さっきの画像のコードは↓

CSS

表示結果

背景画像左上

背景画像が右上に来ている。

この背景画像の位置をど真ん中に変えたい場合は↓のようにCSSに記述する

CSS

表示結果

背景画像ど真ん中

このように変更できる。

使い方はシンプルで

という感じで指定する。

左に寄せたければ、横軸=left にして

と指定すればいい。

指定していない縦軸の方は勝手にcenterが適用される。

右側から100pxで指定したい!という時もあるだろう。

そういう時に便利なのが↓だ。

この意味はright 100px=右端から100px左に寄せたところということだ。

さっきの画像だと↓のように表示される

表示結果

背景画像右側から100px

これで背景画像の位置調整は自由自在だ。

関連記事はこちら!

【CSS】背景画像の繰り返しを止めるにはbackground-repeatを使う!

【CSS】文章の背景に画像を入れたい場合はbackground-imageプロパティを使う!

おすすめの記事