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! While you're at it, check out some resources Treehouse students have shared here.
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
Kirstie Shanks
1,197 PointsMultiple colored backgrounds
I just finished the advanced background video hoping it would help me figure out what I want to do but I'm still not really sure.
Say I want a full page website, rather than one contained within a set width. I want the top of the home page to have a seemingly full-screen photo as the background but then when you scroll down, I want it to be a solid color with some info about the website, then if you scroll down some more I want another solid color. Sort of like a single-page website except I plan on actually having different pages.
Is this something that can be achieved with html and css or do I need to combine the picture and the two blocks of colour to do so? Or do I make the individual content blocks have the desired backgrounds? or some other way that I'm over-looking?
1 Answer
Ricardo Diaz
30,415 PointsHi Kirstie, Welcome to Treehouse!
If I understood you correctly it sounds like all you need to do is create div containers and then style them with CSS. It can get more complicated if you want to get fancy but just create one div container for each one then just style them. So the first one would have the background image then the others would have the
.second_div { background-color: rgb(255,0,255); }
and so on...
If you want to travel down the road of fun you can use jQuery to style your pages. Though you should only do it for fun and not for real world projects.
This one changes your background color randomly Link
Scroll down and watch it change colors Link