バックグラウンドサイズ

要素の背景画像の背景サイズを制御するためのユーティリティ

Class reference

Class
Properties
.bg-autobackground-size: auto;
.bg-coverbackground-size: cover;
.bg-containbackground-size: contain;

Auto

.bg-autoを使用して、背景画像をデフォルトのサイズで表示します。

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

Cover

.bg-coverを使用して、背景レイヤーがいっぱいになるまで背景画像を拡大縮小します。

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

Contain

.bg-containを使用して、トリミングやストレッチを行わずに背景画像を外側のエッジに拡大縮小します。

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

レスポンシブ

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

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

<div class="bg-auto sm:bg-cover md:bg-contain lg:bg-auto xl:bg-cover ..." style="background-image: url(...)"></div>

カスタマイズ

デフォルトでは、Tailwindはauto, coverおよびcontainの背景サイズのユーティリティを提供します。 設定のtheme.backgroundSizeセクションを編集することで、これらを変更、追加、または削除できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundSize: {
        'auto': 'auto',
        'cover': 'cover',
        'contain': 'contain',
+       '50%': '50%',
+       '16': '4rem',
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはbackground size utilitiesのために作られます。

あなたはどのバリアントがbackground size utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのbackgroundSizeプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     backgroundSize: ['responsive'],
+     backgroundSize: ['responsive', 'hover', 'focus'],
    }
  }

機能を使用しない場合

もしbackground size utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのbackgroundSize propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backgroundSize: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!