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

2019.10.03 2024.10.07

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

たとえば↓のような場合

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

そういう時に使えるのが

background-position だ。

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

前述の画像のコードは下記となる。

CSS

body{
    background-image: url(images/test.jpg);
    background-size: 200px;/*背景画像の大きさを調整*/
    background-repeat:no-repeat;/*背景画像の繰り返しをストップ*/
}

body{

background-image: url(images/test.jpg);

background-size: 200px;/*背景画像の大きさを調整*/

background-repeat:no-repeat;/*背景画像の繰り返しをストップ*/

}

表示結果

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

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

CSS

body{
    background-image: url(images/test.jpg);
    background-position:center center;
    background-size: 300px;/*背景画像の大きさを調整*/
    background-repeat:no-repeat;
}

body{

background-image: url(images/test.jpg);

background-position:center center;

background-size: 300px;/*背景画像の大きさを調整*/

background-repeat:no-repeat;

}

表示結果

このように画像の位置を変更できる。

使い方はシンプルで

background-position：横軸の位置　縦軸の位置；

1	background-position：横軸の位置　縦軸の位置；

という感じで指定する。

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

background-position:left;

1	background-position:left;

と指定すればいい。

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

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

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

background-position:right 100px top;

1	background-position:right 100px top;

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

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

表示結果

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