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 CSS Basics (2014) Enhancing the Design With CSS Gradients

Kody Dibble
Kody Dibble
2,554 Points
Posted by Kody Dibble
Kody Dibble
2,554 Points

Linear gradient

Not sure how to get my linear gradient to go from top to bottom...Thanks.

style.css 
/* Complete the challenge by writing CSS below */
.main_header{
  background-image: linear-gradient(steelblue, darkslateblue, 90%, top);
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->
  </body>
</html>

3 Answers

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Kody,

Make sure, there is no space between brackets ( ) inside gradient direction and 90% position. Add to top on the first left before colors, not right end. 

.main-header {
  background-image: linear-gradient(to top, steelblue, darkslateblue 90%);
}

Hope that helps. ;)

Kody Dibble
Kody Dibble
2,554 Points
Kody Dibble
Kody Dibble
2,554 Points

Hmmm didn't work .main-header { background-image: linear-gradient(to top, steelblue, darkslateblue 90%); }

Thanks for the help tho..maybe bottom to top?

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Okay, it worked on my side. Can you please check your class definition that should be called .main-header, not main_header? Maybe refresh again?

Kody Dibble
Kody Dibble
2,554 Points
Kody Dibble
Kody Dibble
2,554 Points

Hmm still didn't work thanks for the help tho..Your code looks right?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Kody,

Have you tried refreshing the challenge? The css that Salman has posted and what you posted in your answer does pass the challenge.

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Yup, can you get that challenge's question to paste here, I want to see fully what it says? I suspect it might be "to bottom" instead top, I don't know if Treehouse has change our challenges question.

Try this one again after refreshing: 

.main-header {
  background-image: linear-gradient(to bottom, steelblue, darkslateblue 90%);
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Salman,

There is a link to the challenge over on the right in the "Related content" section where you can review the challenge instructions.

The original css you posted in your answer is correct.