Background Size

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

Auto

Use backgroundSize="auto" to display the background image at its default size.

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

Cover

Use backgroundSize="cover" to scale the background image until it fills the background layer.

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

Contain

Use backgroundSize="contain" to scale the background image to the outer edges without cropping or stretching.

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

Responsive

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

<x.div backgroundSize={{ md: 'cover' }} />

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