bg-fixed

Create stunning parallax effects with fixed background attachment. The background image stays fixed relative to the viewport while content scrolls over it.

background-attachment: fixed;

Quick Reference

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

Live Demo

Fixed Background Effect

Scroll within the container below to see how the background image remains fixed while the content scrolls:

Fixed Background Demo

This background image is fixed relative to the viewport. As you scroll through this content, notice how the background stays in place while the text moves over it, creating a beautiful parallax effect.

Section 1

The bg-fixed utility is perfect for creating hero sections, landing pages, and any design where you want to create depth and visual interest through layered scrolling effects.

Section 2

Keep scrolling to see more of the fixed background effect. This technique is commonly used in modern web design to create engaging user experiences.

Section 3

The background image maintains its position relative to the viewport, creating the illusion that content is floating over a stationary background.

 <div class="bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 bg-fixed">
   <!-- Scrollable content -->
 </div>

Common Use Cases

Hero Sections

Create stunning hero sections with fixed background images that create depth as users scroll through your content.

Parallax Effects

Build engaging parallax scrolling experiences where background elements move at different speeds than foreground content.

Landing Pages

Design compelling landing pages with fixed backgrounds that maintain visual consistency while showcasing content.

Best Practices & Tips

✅ Do

• Use high-quality, optimized images
• Test on mobile devices (iOS has limitations)
• Ensure sufficient contrast for readability
• Consider performance impact

❌ Don't

• Use very large image files
• Rely solely on mobile for fixed backgrounds
• Overuse the effect on a single page
• Ignore accessibility considerations

Browser Support

⚠️ Mobile Considerations

iOS Safari disables background-attachment: fixed for performance reasons. Consider using alternative approaches for mobile devices:

 @media (hover: hover) {
   .bg-fixed { background-attachment: fixed; }
 }