bg-scroll

The default background attachment behavior. Background images scroll with the viewport but not with the element's content, creating classic scrolling effects.

background-attachment: scroll;

Quick Reference

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

Note: This is the default behavior. You typically don't need to explicitly add bg-scroll unless overriding other attachment values.

Live Demo

Default Scroll Behavior

Scroll within the container below to see how the background stays positioned relative to the viewport:

Scroll Background Demo

This demonstrates the default background attachment behavior. The background image scrolls with the viewport but maintains its position relative to the container, creating the standard scrolling experience.

Default Behavior

The bg-scroll class (or default behavior) makes the background scroll with the viewport. This is the most common and expected scrolling behavior for web content.

Viewport Relative

The background position is calculated relative to the viewport, not the element's content. This creates predictable and familiar scrolling patterns.

Universal Support

This attachment type works consistently across all browsers and devices, making it the most reliable choice for production websites.

 <div class="bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 bg-scroll">
   <!-- Default scrolling behavior -->
 </div>

Background Attachment Comparison

bg-scroll (default)

Background scrolls with viewport

Standard behavior

Most predictable

bg-local

Background moves with content

Content-aware scrolling

Great for cards

bg-fixed

Background stays fixed

Parallax effect

Hero sections

When to Use bg-scroll

Standard Web Pages

Perfect for typical web pages, blogs, and content sites where you want predictable, familiar scrolling behavior.

Mobile-First Design

Ideal for mobile-responsive designs where you need consistent behavior across all devices and screen sizes.

Performance Critical

Best choice when performance is crucial, as it has the least impact on scrolling performance and rendering.

Best Practices & Tips

✅ Advantages

• Universal browser support
• Predictable behavior
• Best performance
• Mobile-friendly
• Default behavior (no class needed)

💡 Pro Tips

• Use as fallback for bg-fixed on mobile
• Combine with background positioning
• Great with subtle patterns
• Works well with gradients
• Override other attachments when needed

Responsive Override Example

Use bg-scroll to override bg-fixed on mobile devices:

 <!-- Fixed on desktop, scroll on mobile -->
 <div class="bg-fixed md:bg-scroll bg-gradient-to-r from-blue-500 to-purple-500">
   <!-- Content -->
 </div>

 <!-- Or use media queries for better control -->
 <div class="bg-scroll lg:bg-fixed bg-hero-pattern">
   <!-- Responsive background attachment -->
 </div>