Background Repeat

    Utilities for controlling the repetition of an element’s background image.

    Use to repeat the background image both vertically and horizontally.

    No Repeat

    Background Repeat - 图2

      Use bg-repeat-x to repeat the background image only horizontally.

      Repeat Vertically

      Background Repeat - 图4

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

      Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-repeat-x to only apply the bg-repeat-x utility on hover.

      For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

      Breakpoints and media queries

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

      To learn more, check out the documentation on Responsive Design, and other media query modifiers.