Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Nathan Goode
Nathan Goode
14,789 Points
Posted by Nathan Goode
Nathan Goode
14,789 Points

How is this achieved?

Hi guys

I really dig this site http://www.matthewdwilliams.com/html/about.html

Was wondering how the author of the site gets the two images to stay fixed with the content rolling over the top? And how he has the image change half way down the screen?

Is it just with CSS? I'm working on a site (albeit very slowly) and this is a featured I'd love to use.

Thanks in advance.

Nath

Luis Sánchez
Luis Sánchez
4,283 Points

Hello Nathan

Looks like he´s using a technice called "Parallax Scrolling". You can found lots of resources talking about the way it works and how implement it, for example http://kickstarthtml5.com/16-very-useful-tutorials-on-parallax-scrolling/

Nathan Goode
Nathan Goode
14,789 Points
Nathan Goode
Nathan Goode
14,789 Points

Hi Luis.

Thanks for the reply. I've read a little about parallax scrolling in a Web Designer mag, thought it may have been something to do with that. Will check out the link. Thanks again!

1 Answer

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Check out this tutorial on how using the magic of JQuery you can too can change background images based on scroll position.

Nathan Goode
Nathan Goode
14,789 Points
Nathan Goode
Nathan Goode
14,789 Points

Thanks James, I'll have a look at the tutorial now. Appreciate it!