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

William Titterton
William Titterton
10,960 Points
Posted by William Titterton
William Titterton
10,960 Points

css gradient direction

what's wrong with this code

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

.main-header
{
  background-image: linear-gradient( bottom,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>

3 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

The direction of the code should be "to top". The syntax changed at some point on how to declare direction values with words like top. "bottom" for an old browser is the same as "to top" under the current syntax. 

.main-header
{
  background-image: linear-gradient( to top ,steelblue, darkslateblue 90%);
}
Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I had some spacing issues in the above code. Should be no space after the opening ( and no space between top and the , So, it should be this: 

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

it's worked, thanks for the help :)

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

I think you need to switch background-image: to just background:

/* Complete the challenge by writing CSS below */

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

Let me know if that works.

William Titterton
William Titterton
10,960 Points
William Titterton
William Titterton
10,960 Points

it hasn't worked, thanks for your input though

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

William Titterton

Silly me! I forgot about the prefix. Sorry, this should work.

.main-header {
  background: -webkit-linear-gradient( bottom, steelblue, darkslateblue 90%);
  background:     -moz-linear-gradient( bottom, steelblue, darkslateblue 90%);
  background:          -o-linear-gradient( bottom, steelblue, darkslateblue 90%);
  background:               linear-gradient( bottom, steelblue, darkslateblue 90%);
}

See here: http://jsfiddle.net/6e9sz3zj/

If this is still not what you want let me know.

William Titterton
William Titterton
10,960 Points
William Titterton
William Titterton
10,960 Points

fixed it pal. apparently you need to define direction using 'to' for example "to top".