Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

background-repeat

background-repeat は CSS のプロパティで、背景画像をどのように反復するかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく反復しないようにしたりすることができます。

背景タイリング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-repeat
1
12
1
1
18
1
2-value

2 つの値の構文 (x 方向と y 方向で異なる値)
3
12
13
5
18
4
multiple backgrounds

複数の背景
1
12
3.6
1.3
18
1
no-repeat
1
12
1
1
18
1
repeat
1
12
1
1
18
1
repeat-x
1
12
1
1
18
1
repeat-y
1
12
1
1
18
1
round
30
12
49
8
30
8
space
30
12
49
8
30
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.pattern {
  background-image: url('dot.png');
  background-repeat: space;
}
.stripe {
  background-repeat: repeat-x;
}

ライブデモ

repeat

CSS Repeat demo.

プレビュー全画面表示

repeat-x

CSS Repeat-x demo.

プレビュー全画面表示

no-repeat

CSS No-repeat demo.

プレビュー全画面表示

実務での使いどころ

  • 背景パターンの均等配置

    background-repeat: space を使って、パターン画像を切り詰めることなく均等な間隔でタイル表示できます。

注意点

  • space と round の値は、画像サイズと要素サイズの関係により意図しない表示になることがあります。レスポンシブデザインでは複数の画面サイズで確認してください。

アクセシビリティ

  • 繰り返される背景パターンが点滅や複雑なパターンを含む場合、光過敏性のあるユーザーに影響する可能性があります。視覚的に穏やかなパターンを選択してください。

参考リンク