Background Attachment

Utilities for controlling how a background image behaves when scrolling.

React propsCSS Properties
backgroundAttachment={keyword}background-attachment: {keyword};


Use backgroundAttachment="fixed" to fix the background image relative to the viewport.

<x.div backgroundAttachment="fixed" backgroundImage="url(...)" />


Use backgroundAttachment="local" to scroll the background image with the container and the viewport.

<x.div backgroundAttachment="local" backgroundImage="url(...)" />


Use backgroundAttachment="scroll" to scroll the background image with the viewport, but not with the container.

<x.div backgroundAttachment="scroll" backgroundImage="url(...)" />


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

<x.div backgroundAttachment={{ md: 'scroll' }} />

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

Edit this page on GitHub