Background Position

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

React propsCSS Properties
backgroundPosition={side}background-position: {side};

Usage

Use thebackgroundPosition={side} utilities to control the position of an element's background image.

left top

top

right top

left

center

right

left bottom

bottom

right bottom

<x.div backgroundRepeat="no-repeat" backgroundPosition="left top" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="top" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="right top" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="left" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="center" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="right" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="left bottom" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="bottom" backgroundImage="url(...)" /> <x.div backgroundRepeat="no-repeat" backgroundPosition="right bottom" backgroundImage="url(...)" />

Responsive

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

<x.div backgroundPosition={{ md: 'right' }} />

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

Edit this page on GitHub