Background Repeat

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

Repeat

Use backgroundRepeat="repeat" to repeat the background image both vertically and horizontally.

<x.div backgroundRepeat="repeat" backgroundImage="url(...)" />

No Repeat

Use backgroundRepeat="no-repeat" when you don't want to repeat the background image.

<x.div backgroundRepeat="no-repeat" backgroundImage="url(...)" />

Repeat Horizontally

Use backgroundRepeat="repeat-x" to repeat the background image only horizontally.

<x.div backgroundRepeat="repeat-x" backgroundImage="url(...)" />

Repeat Vertically

Use backgroundRepeat="repeat-y" to repeat the background image only vertically.

<x.div backgroundRepeat="repeat-y" backgroundImage="url(...)" />

Responsive

To control the repetition of an element's background image at a specific breakpoint, use responsive object notation. For example, adding the property backgroundRepeat={{ md: "no-repeat" }} to an element would apply the backgroundRepeat="no-repeat" utility at medium screen sizes and above.

<x.div backgroundRepeat={{ md: 'no-repeat' }} />

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