Background Attachment

Utilities for controlling how a background image behaves when scrolling.

Fixed

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

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

Local

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

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

Scroll

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

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

Responsive

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.