Ian McNally

Scrolling a page with a background image

April 24, 2015

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

Performance graph 1

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.

Performance graph 2

You’re left with a nice, flat timeline:


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

Further reading

Ian McNally

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