Utilities for controlling the repetition of an element's background image.
<div class="bg-repeat ..." style="background-image: url(...)"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>
<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>
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.
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'],
}
}
}
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,
}
}