Background Image

Utilities for controlling an element's 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"
/>

Responsive

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.