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

background-repeat

背景画像の繰り返し表示方法を制御します。repeat-x で水平方向のみ、repeat-y で垂直方向のみの繰り返しが可能です。space 値は画像間にスペースを均等配置し、round 値は画像を伸縮させて隙間なく並べます。パターン背景やテクスチャの制御に不可欠なプロパティです。

背景タイリング

概要

背景画像の繰り返し表示方法を制御します。repeat-x で水平方向のみ、repeat-y で垂直方向のみの繰り返しが可能です。space 値は画像間にスペースを均等配置し、round 値は画像を伸縮させて隙間なく並べます。パターン背景やテクスチャの制御に不可欠なプロパティです。

対応ブラウザ

デスクトップ

Chrome 30+
Edge 12+
Safari 8+
Firefox 49+

モバイル

Chrome Android 30+
Safari iOS 8+
Firefox Android 49+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク