Scrolling a page with a background image

I noticed some jank (a.k.a. non-smoothness) while scrolling a page with a background image.

The performance looked like this (green is browser paints) :

At the start of scroll, performance hovered a little too closely to 60 frames per second.

The solution was to change the background-attachment. By setting it to fixed, you don’t allow the background image to scroll with the page. This means the browser doesn’t have to rasterize and paint the image while you’re scrolling.

You’re left with a nice, flat timeline:

tl;dr

[container-with-bg-image] {
  background-attachment: fixed;
}

Further reading

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.