Background Image

Utilities for controlling an element's background image.

React propsCSS Properties
backgroundImage={image}background-image: {image};


Use backgroundImage="url(...)" to display an image.

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

Linear Gradient

To give an element a linear gradient background, use one of the backgroundImage="gradient-to-{direction}" utilities, in combination with the gradient color stop utilities.

<x.div backgroundImage="gradient-to-r" gradientFrom="orange-400" gradientVia="red-500" gradientTo="pink-500" />


To control background image at a specific breakpoint, use responsive object notation. For example, adding the property backgroundImage={{ md: "url(...)" }} to an element would apply the backgroundImage="url(...)" utility at medium screen sizes and above.

<x.div backgroundImage={{ md: 'url(...)' }} />

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

Edit this page on GitHub