Background Size

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

React propsCSS Properties
backgroundSize={size}background-size: {size};

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.

Edit this page on GitHub