【html/CSS】背景画像を繰り返さない方法

「backgroundで画像を一つだけ出したいのにたくさんでてくる!?」

背景画像を繰り返さない方法を解説します。

【結論】background-repeat:no-repeat

「background-repeat」は背景画像の繰り返しを指定するCSSです。

「background-repeat:no-repeat」を指定すると繰り替えされなくなります。

<style>
.example{
    /*コレ*/background-repeat: no-repeat;
    background-image: url(https://csshtml.work/wp-content/uploads/cat.jpg);
    background-size: 200px auto;
    background-position: 0 0;
    background-color: #dae5f0;
    height: 200px;
}
</style>
<div class="example"></div>

指定しない場合

「background-repeat」の初期値は「repeat」であり、これは画像を繰り返す指定です。

よって「background-repeat」を指定しないと初期値が適用され、画像が繰り返されます。

<style>
.example2{
    background-image: url(https://csshtml.work/wp-content/uploads/cat.jpg);
    background-size: 200px auto;
    background-position: 0 0;
    background-color: #dae5f0;
    height: 200px;
}
</style>
<div class="example2"></div>

【横だけ繰り返す】background-repeat:repeat-x

横方向にだけ繰り返す場合は「repeat-x」を指定します。

しかし、使うことはまずありません。

<style>
.example3{
    /*コレ*/background-repeat: repeat-x;
    background-image: url(https://csshtml.work/wp-content/uploads/cat.jpg);
    background-size: 200px auto;
    background-position: 0 0;
    background-color: #dae5f0;
    height: 200px;
}
</style>
<div class="example3"></div>

【縦だけ繰り返す】background-repeat:repeat-y

縦方向にだけ繰り返す場合は「repeat-y」を指定します。

しかし、使うことはまずありません。

<style>
.example4{
    /*コレ*/background-repeat: repeat-y;
    background-image: url(https://csshtml.work/wp-content/uploads/cat.jpg);
    background-size: 200px auto;
    background-position: 0 0;
    background-color: #dae5f0;
    height: 200px;
}
</style>
<div class="example4"></div>

【まとめ】背景画像を繰り返さない方法

background-repeat:no-repeat

※指定しないと繰り返される

以上、背景画像を繰り返さない方法でした。