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.

<> <template preview> <div> <x.div display="flex" justifyContent="space-around" mb={8}> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > left top </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="left top" /> </x.div> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > top </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="top" /> </x.div> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > right top </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="right top" /> </x.div> </x.div> <x.div display="flex" justifyContent="space-around" mb={8}> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > left </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="left" /> </x.div> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > center </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="center" /> </x.div> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > right </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="right" /> </x.div> </x.div> <x.div display="flex" justifyContent="space-around"> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > left bottom </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="left bottom" /> </x.div> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > bottom </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="bottom" /> </x.div> <x.div flex="1 1 0"> <x.p textAlign="center" fontSize="sm" color="emerald-600" fontWeight="medium" mb={1} > right bottom </x.p> <x.div mx="auto" bg="emerald-300" borderRadius="md" w={24} h={24} backgroundRepeat="no-repeat" backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')" backgroundPosition="right bottom" /> </x.div> </x.div> </div> </template> <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