Background repeat

Class reference

# Repeat

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

<div class="bg-repeat bg-center ..." 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 Elements’ responsive design features, check out the Responsive Design documentation.