Parallax scrolling in HTML

Photo credit: Sonic Team
// 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;
}

--

--

--

Oh geez, Josh Frank decided to go to Flatiron? He must be insane…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript Hoisting & TDZ

How To Build A Chat App With React Native

Build React Native Library (by create-react-native-library)

My ELI5 For Basic React Concepts: Lifting State Up

Top 10 Javascript Projects on GitHub by 2017

May 14: Random CSS animations using styled-components in React

ChromeApps Development

Tracking Users to certain areas of your site by Creating Google Analytics Events on the fly just…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Josh Frank

Josh Frank

Oh geez, Josh Frank decided to go to Flatiron? He must be insane…

More from Medium

CSS Cascade summarized

Difference Between HTML and CSS

Simple Tricks For CSS Animation

What The Heck is CSS Specificity?