【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繰り替えさず、1つのみ表示

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

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

renga

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

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

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

★ 繰り返さず、1つのみ表示 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>★ 繰り返さず、1つのみ表示 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>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト