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

Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points
Posted by Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points

Challenge problem

This was what was asked:

Set the second color stop's position to 90%. Then, add the value that sets the gradient direction from bottom to top.

My reply:

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

This apparently is wrong. Any advice?

style.css 
/* Complete the challenge by writing CSS below */

.main-header {
  background-image: linear-gradient (bottom to top, 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>
Allen Matasy
seal-mask
.a{fill-rule:evenodd;}techdegree
Allen Matasy
UX Design Techdegree Student 13,223 Points
Allen Matasy
.a{fill-rule:evenodd;}techdegree
Allen Matasy
UX Design Techdegree Student 13,223 Points

You need to tell the gradient where to start. You're missing '0%' for steelblue.

background-image: linear-gradient (bottom to top, steelblue 0%, darkslateblue 90%);

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You're very close, but when specifying the angle by direction name, you only specify the target direction. So " the value that sets the gradient direction from bottom to top" is simply "to top".

David Evans
David Evans
10,490 Points
David Evans
David Evans
10,490 Points

Hi Immanuel,

You received an answer on your other topic that should help you out: https://teamtreehouse.com/community/problem-with-challenge-6

The following is taken from there, and I upvoted her answer to give her credit.

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

To go a bit more into depth, 'bottom to top' isn't an actual direction recognized, from what I read here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

The following would be acceptable: to top, to bottom, to left, and to right

Somebody can correct me if I'm wrong about this.

Hope this helps.

Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points
Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points

Thanks a lot for your help!