2021-02-10

CSS: background-repeat 背景画像の繰り返し方法を指定

CSS で背景画像の繰り返し方法を指定するには background-repeat プロパティを使用します。

デフォルトでは水平方向と垂直方向の両方ともタイル状に繰り返し表示されます。 指定する値には repeat、repeat-x、repeat-y、no-repeat があります。

background-repeat プロパティの使用例

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

値	説明
repeat	水平方向と垂直方向の両方向に繰り返し表示
repeat-x	水平方向のみ繰り返し表示
repeat-y	垂直方向のみ繰り返し表示
no-repeat	繰り替えさず、１つのみ表示

繰り返し方法指定のサンプルコード

下のレンガ画像を ４つの div 要素の背景画像として指定し、繰り返し方法をそれぞれ指定します。

★ 両方向に繰り返し background-repeat: repeat;

★ 水平方向に繰り返し background-repeat: repeat-x;

★ 垂直方向に繰り返し background-repeat: repeat-y;

★ 繰り返さず、１つのみ表示 background-repeat: no-repeat;

<h4>★ 両方向に繰り返し background-repeat: repeat;</h4>
<div class="sample1 renga"></div>

<h4>★ 水平方向に繰り返し background-repeat: repeat-x;</h4>
<div class="sample2 renga"></div>

<h4>★ 垂直方向に繰り返し background-repeat: repeat-y;</h4>
<div class="sample3 renga"></div>

<h4>★ 繰り返さず、１つのみ表示 background-repeat: no-repeat;</h4>
<div class="sample4 renga"></div>

<style>
    div.renga {
        background-image: url("img/renga.png");
        width: 300px;
        height: 150px;
        border: 1px solid black;
    }
    div.sample1 {
        background-repeat: repeat;
    }
    div.sample2 {
        background-repeat: repeat-x;
    }
    div.sample3 {
        background-repeat: repeat-y;
    }
    div.sample4 {
        background-repeat: no-repeat;
    }
</style>