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

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

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

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

CSS

表示結果

背景画像繰り返し

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

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

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

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

background(背景)ー(の)repeat(繰り返し):no-repeat(繰り返さない)

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

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

CSS

表示結果

背景画像

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

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

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

おすすめの記事