【CSS】背景画像のサイズ（大きさ）を変えたいならbackground-sizeを使う！

2019.10.07 2024.10.07

今回は背景画像のサイズを変えたい場合について！

CSSで下の写真を背景画像に設定したい。

しかし、実際に背景画像を設定できるbackground-imageで背景画像を設定してみると

body{
    background-image: url(images/test1.jpg);/*背景画像を指定*/
}

body{

background-image: url(images/test1.jpg);/*背景画像を指定*/

}

「大きすぎる！写真が全部入ってないじゃん。」

ということがよくあると思う。

Contents

1 背景画像のサイズ変更はbackground-sizeを使う
- 1.1 background-sizeの使い方

背景画像のサイズ変更はbackground-sizeを使う

「この画像の大きさを変えたい！」

という時に便利なのがbackground-sizeプロパティだ。

background=背景
size=大きさ

だから、背景の大きさを変えるプロパティと言える。

background-sizeの使い方

使い方は簡単だ。

background-size: 横の長さ 縦の長さ;

1	background-size: 横の長さ縦の長さ;

と指定するだけだ。

指定する方法は100pxと数値で指定してもいいし、％（パーセント）で指定もOK。

background-size: 横の長さ;

1	background-size: 横の長さ;

と横の長さだけを指定することも出来る。

この場合は、縦の長さに関してはautoとなり、自動で調整される。

先程の写真を画面の真ん中に横幅500pxの大きさで入るようにCSSで記述すると
※コードを簡単にするためにbodyタグに直接CSSを適用

【CSS】
body{
    background-image: url(images/test1.jpg);/*背景画像を指定*/
    background-position:center top 200px;/*背景画像の位置を調整*/
    background-size:500px auto;/*背景画像の大きさを調整*/
    background-repeat:no-repeat;/*背景画像の繰り返しを無しにする*/
}

【CSS】

body{

background-image: url(images/test1.jpg);/*背景画像を指定*/

background-position:center top 200px;/*背景画像の位置を調整*/

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

background-repeat:no-repeat;/*背景画像の繰り返しを無しにする*/

}

こんな感じで調整ができる。

背景画像はデフォルトだと勝手に繰り返されてしまうから、それを止めたい場合は

background-repeat:no-repeat;

1	background-repeat:no-repeat;

を使って繰り返しをストップさせる。

また、背景画像の位置を調整したい場合は

background-position

1	background-position

を使って細かく調整をする。

背景画像は

設定の仕方
大きさの調整
繰り返しの調整
位置の調整

とセットで覚えた方が覚えやすく、実際にも使いやすいと思う。