Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Gradients

Hello, setting up color stop and direction.

I am setting up color stop using background-image with dark blue and light blue colors with 90 % behind second color, and gradient setting going from top to bottom, I placed direction going from top to bottom behind second color and before first color, not accepting either code, any suggestions?

Thank you, Dawn

style.css
/* Complete the challenge by writing CSS below */
.main-header {
  background-image: linear-gradient (steelblue, darkslateblue 90%, bottom to 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>

6 Answers

Eduardo Valencia
Eduardo Valencia
12,444 Points

Hey. The direction should go first, and the direction you are looking for is to bottom, like in the following:

#fake-element {
    background-image: linear-gradient(to bottom, steelblue, darkslateblue 90%);
}

Hope this helped!

Thank you Eduardo, but its still giving me error message Make sure you're setting the first color stop value to 'steelblue'.

Eduardo Valencia
Eduardo Valencia
12,444 Points

Hi. I think that is because the challenge says that the direction was supposed to be from Botton to top, and not from top to bottom. So just replace the direction to to top and it should work.

hey, thanks again but the same error message keeps popping up, this is what I have coded. .main-header { background-image: linear-gradient (bottom to top, steelblue, darkslateblue 90%,); }

Eduardo Valencia
Eduardo Valencia
12,444 Points

Perhaps you should try:

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

instead of bottom to top. Also, I'm not sure whether this makes any difference, but you should probably remove the extra comma after 90%.

okay awesome!!1 that worked, thank you again, sorry to be such a bother, but im extremely pressed for time as for I have a November 3rd deadline. Thank you so much for all your help! Could you look at another question for me with box-shadowing?

hello again, any help with box shadow in css? I have tried numerous times with this question, however it keeps saying I am incorrect. It asks for inner box shadow values of horizontal and vertical values of 0, 60px radius, 5px width. I feel like I am putting in correct code, any suggestions? style.css /* Complete the challenge by writing CSS below */ .main-heading { text-shadow: 0 0 5px #be7b31; } .title { text-shadow: 1px 3px 0 #e59740; } .main-header { box-shadow: inset 0 0 60px 5px firebrick; } 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 -->

    <footer class="main-footer">
        <p>All rights reserved to the state of <a href="#">California</a>.</p>
        <a href="#top">Back to top &raquo;</a>
    </footer>

</body> </html>