Background Repeat

@include('_partials.class-table', [ 'rows' => [ [ '.bg-repeat', 'background-repeat: repeat;', 'Repeat the background image both vertically and horizontally.', ], [ '.bg-no-repeat', 'background-repeat: no-repeat;', 'Don\'t repeat the background image.', ], [ '.bg-repeat-x', 'background-repeat: repeat-x;', 'Repeat the background image only horizontally.', ], [ '.bg-repeat-y', 'background-repeat: repeat-y;', 'Repeat the background image only vertically.', ], [ '.bg-repeat-round', 'background-repeat: round;', 'Repeat the background image as much as possible without clipping, stretching the image until there is room for another one to be added, leaving no gap between them.', ], [ '.bg-repeat-space', 'background-repeat: space;', 'Repeat the background image as much as possible without clipping, distributing whitespace evenly between the images.', ], ] ])

Repeat

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

No Repeat

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Repeat Horizontally

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Repeat Vertically

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

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.

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

@component('_partials.responsive-code-sample') @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'background repeat', 'property' => 'backgroundRepeat', ], 'variants' => [ 'responsive', ], ])