Parallax scrolling in HTML

Photo credit: Sonic Team

I’m unashamed to say I have a soft spot for parallax scrolling in HTML. It gives a document depth, polish and dynamism without distracting from content.

Parallax scrolling gets very elaborate — but at its simplest it’s just content that scrolls over a stationary background. All that takes is the CSS below. If I had a dollar for every time I’ve copy-pasted these lines of code I’d have some serious walking-around money:

// Put whatever on the first line!
// url(), linear-gradient(), radial-gradient(), etc...
html, body {
  background-image: linear-gradient( #77F7F7, #DDFFFF );
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}