Tailwind CSS on GitHub

Background Repeat

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

Default class reference

Class
Properties
bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;
bg-repeat-roundbackground-repeat: round;
bg-repeat-spacebackground-repeat: space;

Repeat

Use bg-repeat to repeat the background image both vertically and horizontally.

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

No Repeat

Use bg-no-repeat when you don't want to repeat the background image.

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

Repeat Horizontally

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

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

Repeat Vertically

Use bg-repeat-y to repeat the background image only vertically.

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

Responsive

To control the repetition of an element's background image at a specific breakpoint, add a {screen}: prefix to any existing background repeat utility. For example, adding the class md:bg-repeat-x to an element would apply the bg-repeat-x utility at medium screen sizes and above.

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

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

Customizing

Variants

By default, only responsive variants are generated for background repeat utilities.

You can control which variants are generated for the background repeat utilities by modifying the backgroundRepeat property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

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

Disabling

If you don't plan to use the background repeat utilities in your project, you can disable them entirely by setting the backgroundRepeat property to false in the corePlugins section of your config file:

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