過去バージョン

background-repeat プロパティとは

background-repeat は background-image で指定した背景画像をどの方向にどう繰り返すかを指定する CSS プロパティです。デフォルトは repeat (縦横とも繰り返し)。

値の一覧

基本例

/* 初期値 (縦横繰り返し) */
.repeat {
    background-image: url('pattern.png');
    background-repeat: repeat;
}

/* 繰り返さない */
.no-repeat {
    background-image: url('logo.png');
    background-repeat: no-repeat;
}

/* 横方向のみ */
.horizontal {
    background-image: url('stripe.png');
    background-repeat: repeat-x;
}

/* 縦方向のみ */
.vertical {
    background-image: url('vertical-line.png');
    background-repeat: repeat-y;
}

2 値指定 (横方向 / 縦方向)

1 つ目が水平方向、2 つ目が垂直方向の指定になります。1 値指定は両方向に同じ値を適用したのと同じ意味。

/* 横は繰り返し、縦は繰り返さない (上の repeat-x と同じ) */
.a { background-repeat: repeat no-repeat; }

/* 横は繰り返さない、縦は space */
.b { background-repeat: no-repeat space; }

/* 横は round、縦は repeat */
.c { background-repeat: round repeat; }

space — 均等間隔で並べる

space は画像が端でカットされないように、整数個並ぶように余白を均等に分配します。タイル状のパターン表示で重宝します。

.icons {
    background-image: url('icon.png');
    background-repeat: space;
    /* 例: 幅 1000px に幅 100px の画像が 9 個並ぶ場合
       9 個並べて余り 100px を 8 つの隙間に 12.5px ずつ配分 */
}

round — 整数個並ぶように拡縮

round は画像のサイズ自体を伸縮して、要素内に整数個ぴったり並ぶように調整します。

.banner {
    width: 950px;
    background-image: url('tile.png');     /* 100px 画像 */
    background-repeat: round;
    /* 950px に 100px だと 9.5 個 -> 95px に縮小して 10 個並ぶ */
}

repeat / space / round の比較

background ショートハンドでの記述

background-repeat は background 一括指定の中にも書けます。

/* 個別指定 */
.a {
    background-image: url('bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 一括指定 */
.b {
    background: url('bg.png') no-repeat center/cover;
}

定番パターン

ヒーロー画像 (繰り返さず中央配置)

.hero {
    background-image: url('hero.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 60vh;
}

タイルパターン (背景全面に敷き詰め)

body {
    background-image: url('subtle-pattern.png');
    background-repeat: repeat;        /* 初期値だが明示 */
}

水平ボーダーパターン

.divider {
    background-image: url('dots.png');
    background-repeat: repeat-x;
    background-position: center;
    height: 20px;
}

FAQ

Q: 元の記事タイトルは "background-repear" だがタイポ？
A: そのとおり typo。正しくは background-repeat。本記事ではタイトルも訂正している。

Q: no-repeat でも背景画像が見えない
A: background-position や要素サイズを確認。位置が領域外、または要素の高さが 0 の可能性。

Q: space と round はブラウザ対応？
A: モダンブラウザは全対応 (IE11 含む)。古い IE は要 polyfill。

関連プロパティ

• background-image — 画像 / グラデーション指定
• background-position — 位置指定
• background-size — サイズ指定 (cover / contain)
• background — 一括指定