Background Position

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

Usage

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

<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.