background-repeat

要素の背景画像の繰り返しを制御するためのユーティリティ。

クラススタイル

bg-repeat

background-repeat: repeat;

bg-repeat-x

background-repeat: repeat-x;

bg-repeat-y

background-repeat: repeat-y;

bg-repeat-space

background-repeat: space;

bg-repeat-round

background-repeat: round;

bg-no-repeat

background-repeat: no-repeat;

例

bg-repeat ユーティリティを使用して、背景画像を垂直方向と水平方向の両方に繰り返します。

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>

bg-repeat-x ユーティリティを使用して、背景画像を水平方向のみに繰り返します。

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>

bg-repeat-y ユーティリティを使用して、背景画像を垂直方向のみに繰り返します。

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>

bg-repeat-space ユーティリティを使用して、背景画像をクリッピングせずに繰り返します。

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>

bg-repeat-round ユーティリティを使用して、背景画像をクリッピングせずに繰り返し、ギャップを避けるために必要に応じて引き伸ばします。

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>

bg-no-repeat ユーティリティを使用して、背景画像の繰り返しを防止します。

<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>

プレフィックスa background-repeat ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するmedium 画面サイズ以上

<div class="bg-repeat md:bg-repeat-x ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。