CSS Background Attachment Fixed

Create stunning parallax effects and fixed backgrounds with CSS

Scroll down to see the effect in action ↓

Home » CSS Background Attachment Fixed

The background-attachment property in CSS controls how a background image behaves when the user scrolls. When set to fixed, it creates eye-catching parallax effects by keeping the background stationary while content scrolls over it. This powerful technique can add depth and visual interest to your web designs.

Understanding Background Attachment

The background-attachment property accepts three main values:

scroll (default)

Scroll This Box

The background scrolls with the content. This is the default behavior.

Keep scrolling to see how the background moves with the content...

background-attachment: scroll;

fixed

Scroll This Box

The background stays fixed relative to the viewport.

Notice how the background doesn't move as you scroll...

background-attachment: fixed;

local

Scroll This Box

The background scrolls with the element's content.

The background moves with the scrolling content inside this element...

background-attachment: local;

Parallax Effect 1

Fixed background creates depth

Creating Parallax Effects

Parallax scrolling creates an illusion of depth by making background images move slower than foreground content.

/* Basic parallax section */
.parallax-section {
    min-height: 100vh;
    background-image: url('background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* With overlay for better text readability */
.parallax-with-overlay {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('background.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

Multiple Fixed Backgrounds

You can create complex effects by combining multiple backgrounds with different attachment values:

/* Multiple backgrounds with mixed attachments */
.multi-parallax {
    background: 
        /* Overlay - scrolls normally */
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
        /* Pattern - fixed */
        url('pattern.svg'),
        /* Main image - fixed */
        url('hero-bg.jpg'),
        /* Base color - scrolls */
        #000;
    background-attachment: scroll, fixed, fixed, scroll;
    background-size: cover, 100px 100px, cover, cover;
    background-position: center, 0 0, center, center;
}

Multiple Fixed Backgrounds

Different layers with different behaviors

Performance Considerations

⚠️ Mobile Device Warning

background-attachment: fixed is disabled on most mobile browsers due to performance issues. Always provide fallbacks for mobile devices.

Performance Optimization Tips

🖼️ Optimize Images

  • Use appropriate image formats (WebP, JPEG)
  • Compress images without quality loss
  • Use correct dimensions for viewport
  • Consider using CSS gradients instead

📱 Mobile Fallbacks

  • Detect touch devices
  • Use scroll on mobile
  • Provide alternative designs
  • Test on real devices

⚡ GPU Acceleration

  • Use transform: translateZ(0)
  • Limit number of fixed backgrounds
  • Avoid complex blend modes
  • Monitor paint performance

Mobile-Friendly Implementation

/* Mobile-aware fixed background */
.parallax-hero {
    background-image: url('hero-bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Fallback for mobile devices */
@media (max-width: 768px) {
    .parallax-hero {
        background-attachment: scroll;
    }
}

/* Feature detection approach */
@media (hover: none) and (pointer: coarse) {
    .parallax-hero {
        background-attachment: scroll;
    }
}

/* JavaScript detection */
if (/Mobi|Android/i.test(navigator.userAgent)) {
    document.querySelector('.parallax-hero')
        .style.backgroundAttachment = 'scroll';
}

Parallax Effect 2

Another fixed background layer

Advanced Techniques

1. Text Clipping with Fixed Backgrounds

/* Text with fixed background */
.fixed-text {
    font-size: 8rem;
    font-weight: bold;
    background-image: linear-gradient(45deg, #ff006e, #8338ec);
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

2. Reveal Effects on Scroll

/* Reveal sections with fixed backgrounds */
.reveal-section {
    min-height: 100vh;
    background: #000;
    position: relative;
}

.reveal-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('reveal-image.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.reveal-section.in-view::before {
    opacity: 1;
}

3. Masked Parallax Sections

/* Masked parallax with shapes */
.masked-parallax {
    min-height: 100vh;
    background: url('background.jpg');
    background-attachment: fixed;
    background-size: cover;
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        black 40%,
        transparent 70%
    );
    mask-image: radial-gradient(
        ellipse at center,
        black 40%,
        transparent 70%
    );
}

Interactive Demo

Change Background Attachment

Interactive Demo Area

Scroll the page to see how different attachment values behave

Common Use Cases

Hero Sections

/* Full-screen hero with parallax */
.hero-parallax {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        url('hero-image.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: white;
    text-align: center;
}

/* Content sections between parallax */
.content-section {
    background: #fff;
    padding: 5rem 0;
    position: relative;
    z-index: 1;
}

Section Dividers

/* Parallax dividers between sections */
.section-divider {
    height: 50vh;
    background-image: url('divider-pattern.svg');
    background-attachment: fixed;
    background-size: 200px 200px;
    background-repeat: repeat;
    position: relative;
    margin: 5rem 0;
}

/* With gradient overlay */
.section-divider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #fff 0%,
        transparent 20%,
        transparent 80%,
        #fff 100%
    );
}

Browser Support & Compatibility

Property Value Desktop Browsers Mobile Browsers Notes
scroll ✅ All browsers ✅ All browsers Default value, universally supported
fixed ✅ All browsers ❌ Most disabled iOS Safari, Chrome Mobile disable for performance
local ✅ Modern browsers ✅ Modern browsers IE9+, good mobile support

Testing for Support

/* CSS feature detection */
@supports (background-attachment: fixed) {
    .parallax {
        background-attachment: fixed;
    }
}

/* JavaScript detection */
function supportsFixedBackground() {
    const test = document.createElement('div');
    test.style.backgroundAttachment = 'fixed';
    return test.style.backgroundAttachment === 'fixed';
}

// Detect iOS specifically
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS) {
    document.body.classList.add('ios-device');
}

Accessibility Considerations

♿ Accessibility Notes

  • Motion Sensitivity: Respect prefers-reduced-motion preferences
  • Content Readability: Ensure sufficient contrast with fixed backgrounds
  • Performance: Provide alternatives for low-powered devices
  • Navigation: Don't rely solely on parallax for content structure
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .parallax {
        background-attachment: scroll;
    }
    
    /* Alternative design for reduced motion */
    .parallax-section {
        background-image: none;
        background-color: #1a1a1a;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .parallax-section {
        background-image: none;
        background-color: #000;
        border: 2px solid #fff;
    }
}

Best Practices

✅ Do's

  • Test on real mobile devices
  • Provide fallbacks for mobile
  • Optimize image file sizes
  • Use CSS gradients when possible
  • Respect user preferences
  • Monitor performance impact

❌ Don'ts

  • Don't use too many fixed backgrounds
  • Avoid large uncompressed images
  • Don't assume mobile support
  • Skip accessibility testing
  • Ignore performance metrics
  • Force effects on all devices

Final Parallax

Thanks for scrolling!

Conclusion

The background-attachment: fixed property is a powerful tool for creating engaging visual effects, but it requires careful implementation. Always consider mobile devices, performance implications, and accessibility when using fixed backgrounds. With proper fallbacks and optimization, you can create stunning parallax effects that enhance user experience across all devices.

Ready to Create Parallax Effects?

Start implementing fixed backgrounds and parallax scrolling in your projects!

Background Generator Multiple Backgrounds