bg-local

Create dynamic scrolling effects where the background image moves with both the container and viewport. Perfect for content-aware background behaviors.

background-attachment: local;

Quick Reference

Class	Properties
`bg-local`	`background-attachment: local;`

Live Demo

Local Background Scrolling

Scroll within the container below to see how the background image moves with the content:

Local Background Demo

This background scrolls with the container content. As you scroll, the background image moves along with the text, creating a cohesive scrolling experience where everything moves together.

Understanding bg-local

The bg-local utility makes the background image scroll with the element's content. This creates a natural scrolling behavior where the background and content move as one unit.

Perfect for Content Areas

This attachment type is ideal for content areas, cards, and containers where you want the background to feel integrated with the scrollable content.

Mobile Friendly

Unlike bg-fixed, bg-local works consistently across all devices and browsers, making it a reliable choice for responsive designs.

 <div class="bg-gradient-to-br from-green-600 via-emerald-600 to-teal-600 bg-local">
   <!-- Content scrolls with background -->
 </div>

bg-local vs bg-scroll

bg-local

Background moves with content

Scroll to see the effect

Background and content move together

bg-scroll (default)

Background stays with viewport

Content scrolls over background

Background position remains fixed

Common Use Cases

Content Cards

Perfect for scrollable content cards where the background should move naturally with the text content.

Chat Interfaces

Ideal for chat bubbles and message containers where backgrounds should scroll with the conversation flow.

List Views

Great for scrollable lists and feeds where the background pattern should move with the list items.

Best Practices & Tips

✅ Perfect For

• Content-heavy scrollable areas
• Mobile-first responsive designs
• Consistent cross-browser behavior
• Subtle background patterns

💡 Pro Tips

• Works great with gradients
• Combine with bg-repeat for patterns
• Use with opacity for subtle effects
• Test scrolling performance on mobile