Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Posted by Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

How can i change backgrounds when scrolling down pages? I've left an example inside of a page that does exactly that.

http://bigdropinc.com/ on their home page when you scroll down there are different color backgrounds, I'd like to do something similar for my site.

4 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

The technique is often reffered to as Parallax Scrolling or One Page Layout.

It does not require javascript to accomplish.

Pure HTML and CSS example: http://codepen.io/keithclark/pen/JycFw

Javascript example using fullpage.js: http://alvarotrigo.com/fullPage/

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Thank you very much, this treehouse community is absolutely fantastic. I cannot express enough how helpful you have all been in my learning. God bless you.

Luke Pettway
Luke Pettway
16,591 Points
Luke Pettway
Luke Pettway
16,591 Points

It looks like this site uses several <section> elements with content inside of them set to static heights, in this case 770px. It's inline so it's possible they are using javascript to do some calculations to determine what size they should be.

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Thanks Luke, are there any videos on here that would explain the technique you mentioned that you know of?

Luke Pettway
Luke Pettway
16,591 Points
Luke Pettway
Luke Pettway
16,591 Points

Here is one using a fixed layout which I think is more of what ( I think) you meant:

http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Perfect! Thank you so much.