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

CSS

Posted by Ian Kelly
Ian Kelly
851 Points

Gradient page background question

I'm trying to use gradients for a page background. So far I've been able to achieve partial success, but when I scroll down, the backgound (gradient) changes. What I'm looking for is a way to set the background as a linear gradient to the size of the viewport, and keep it fixed regardless of other content on the page. Any ideas?

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I did a little research on it and some experimentation on codepen. Here's the codepen link in case you want to see if it's doing what you want it to do. http://codepen.io/anon/pen/lqfGx

What seems to work is applying the gradient to the html element and then using background-attachment: fixed; after the gradient code. This fixes the background to the viewport. One example said to use min-height: 100%; but I commented that out and it seems to be fine without it.

You can un-comment the two paragraphs to see what it's like with and without a vertical scrollbar.