【Tailwind和訳】BACKGROUNDS/Background Repeat

この記事について

この記事は、BACKGEOUNDS/Background Repeatの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Background Repeat

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

Class	Properties
bg-repeat	background-repeat: repeat;
bg-no-repeat	background-repeat: no-repeat;
bg-repeat-x	background-repeat: repeat-x;
bg-repeat-y	background-repeat: repeat-y;
bg-repeat-round	background-repeat: round;
bg-repeat-space	background-repeat: space;

繰り返し

bg-repeat を使って、背景画像を縦にも横にも繰り返し表示します。

<div class="bg-repeat ..." style="background-image: url(...)"></div>

リピートなし

背景画像を繰り返し表示させたくない場合は、bg-no-repeat を使用します。

<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

水平方向の繰り返し

bg-repeat-x を使って、背景画像を水平方向にのみ繰り返します。

<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>

縦方向に繰り返し

bg-repeat-y を使って、背景画像を縦方向にのみ繰り返します。

<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>

レスポンシブ

特定のブレークポイントで要素の背景画像の繰り返しを制御するには、既存の背景リピートユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:bg-repeat-x というクラスを要素に追加すると、bg-repeat-x ユーティリティが中程度のスクリーンサイズ以上で適用されます。

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

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

バリアント

デフォルトでは、バックグラウンドリピートユーティリティーには、レスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある backgroundRepeat プロパティを変更することで、バックグラウンドリピートユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       backgroundRepeat: ['hover', 'focus'],
      }
    }
  }

無効化

背景リピートユーティリティをプロジェクトで使用する予定がない場合は、設定ファイルの corePlugins セクションで backgroundRepeat プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     backgroundRepeat: false,
    }
  }