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

Roven Loo
Roven Loo
7,834 Points
Posted by Roven Loo
Roven Loo
7,834 Points

I don't really know what I'm doing wrong here.

The gradient is already from bottom to top but it keeps telling me that it's not.

style.css 
.main-header {
  background-image: linear-gradient(180deg, steelblue, darkslateblue 90%);
}
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>

2 Answers

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Is it that you simply want it going from bottom to top?

If so try: 

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

Let me know if that works :)

remember to comment and mark 'best answers' so we know if we need to delve deeper :)

Roven Loo
Roven Loo
7,834 Points
Roven Loo
Roven Loo
7,834 Points

Ah thank you so much for your help!

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

I believe for this challenge they want you to use to top for determining the direction of the gradient. Challenges can be pretty specific sometimes in their requirements.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

agreed. It may be worth adding it to the feedback, after the quiz, and they may add it as an accepted answer :)

Roven Loo
Roven Loo
7,834 Points
Roven Loo
Roven Loo
7,834 Points

Thank you very much for your help :)