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

2019年9月30日 2020年12月10日

今回は背景画像の繰り返しを止める方法について

背景に画像とかイラストを設定したい時がある。

設置方法はbackground-imageプロパティを使うのだが、それだけだと↓のようになってしまうことがよくある。

CSS

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

body{

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

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

}

表示結果

これはこれできれいなのだが、

「繰り返さずに1枚が画像だけを表示させたいのに、、、」

という時がプログラミング小僧がプログラミングを勉強したての頃はよくあった。

そういう時に便利なのが、background-repeat:no-repeatだ。

background（背景）ー（の）repeat（繰り返し）：no-repeat(繰り返さない）

って意味だから、覚えやすい。

背景画像の繰り返しを止める場合は以下のように記述すればいい。

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;/*背景画像の繰り返しを止める*/

}

表示結果

このように背景画像の繰り返しが止まる。

非常に便利なので覚えておきたい。