【Tailwind和訳】BACKGROUNDS/Background Position

この記事について

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

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

Background Position

要素の背景画像の位置を制御するためのユーティリティーです。

Class	Properties
bg-origin-border	background-origin: border-box;
bg-origin-padding	background-origin: padding-box;
bg-origin-content	background-origin: content-box;

使い方

bg-{side}ユーティリティを使って、要素の背景画像の位置を制御します。

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

レスポンシブ

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

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

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

カスタマイズ

バックグラウンドポジション

デフォルトでは、Tailwind は 9 つのbackground-positionのユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind の設定のtheme.backgroundPositionセクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      backgroundPosition: {
        bottom: 'bottom',
+       'bottom-4': 'center bottom 1rem',
        center: 'center',
        left: 'left',
-       'left-bottom': 'left bottom',
-       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+       'top-4': 'center top 1rem',
      }
    }
  }

バリアント

デフォルトでは、レスポンシブバリアントのみが背景位置ユーティリティのために生成されます。

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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