A section where the background image stays anchored in place while the text and cards scroll over it. The "Cómo lo hacemos" effect — calm, cinematic, draws focus to the content.
Scroll inside the frame. The dark gradient (simulating a kitchen / atmospheric photo) stays put as the cards scroll past it.
↓ Scroll down — the background will stay fixed while the cards pass over it.
Notice the background doesn't move as you scroll this card up the screen.
The image stays anchored. Cards pass over it like film over a projector.
This works inside this scrollable frame because we used position: sticky, not background-attachment: fixed.
iOS Safari handles this flawlessly. background-attachment: fixed would have failed on iOS — that's why we use the sticky approach.
↑ The panel ends here. Normal scrolling resumes.
Recommended approach. Works inside any scrollable container, supported on iOS Safari, no flicker. The background is its own element with position: sticky, and the content sits over it.
<section class="panel">
<div class="panel-bg"></div> <!-- the sticky background -->
<div class="panel-content"> <!-- the scrolling content -->
<h2>Cómo lo hacemos</h2>
<div class="step-card">...</div>
<div class="step-card">...</div>
</div>
</section>.panel {
position: relative;
min-height: 700px; /* tall enough for visible scroll distance */
isolation: isolate;
}
.panel-bg {
position: sticky;
top: 0;
height: 100vh; /* fills viewport while in view */
margin-bottom: -100vh; /* THE TRICK: pulls the next sibling up to overlap */
background: url('photo.jpg') center/cover;
z-index: 0;
}
.panel-content {
position: relative;
z-index: 2;
padding: 80px 22px;
}The margin-bottom: -100vh trick — without it, the background takes up real vertical space inside the panel, pushing the content down a full viewport. The negative margin pulls the next element up to overlap it, so the content visually starts at the top of the panel even though the sticky bg is anchored.
Simpler but iOS-unfriendly. Sets background-attachment: fixed on the section directly. Older, well-known, but breaks on iOS Safari — the background scrolls with the page instead of staying fixed. Always include the scroll fallback for mobile.
<section class="process">
<h2>Cómo lo hacemos</h2>
<div class="step-card">...</div>
</section>.process {
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* THIS is the magic line */
}
/* iOS Safari fallback — don't try to do fixed on mobile */
@media (max-width: 900px) {
.process { background-attachment: scroll; }
}This is what the Chevy 55 site uses. It's a one-line implementation that works on desktop, with a clean fallback on mobile (image just scrolls normally). Trade-off: mobile doesn't get the effect at all. With the sticky approach above, mobile users see it too.
iOS Safari + background-attachment: fixed = broken. The background scrolls with the page anyway. Always pair with @media (max-width: 900px) { background-attachment: scroll } as fallback. Or just use the sticky approach above.
Performance. background-attachment: fixed can cause repaints on every scroll tick — older devices stutter. Sticky positioning is GPU-composited and smoother.
Panel height matters. The effect needs scroll distance to show. If the panel is shorter than a viewport, the user won't perceive the "fixed" effect — they'll scroll past in one motion. Aim for at least min-height: 80vh, ideally 100vh+.
Overlay your image. Always pair the bg with a dark gradient overlay (::after) so foreground text reads. Even great photos make poor backdrops for body text without dimming.
Don't chain too many. One fixed-bg panel per page reads as a thoughtful pause. Three of them in a row reads as "the developer just learned this trick." Use sparingly.
Source: Chevy 55 "Cómo lo hacemos" / process section (user-uploaded HTML, 2026-05-18). Uses background-attachment: fixed; the sticky variant shown above is the iOS-safe alternative.