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

Heather Comer
Heather Comer
1,956 Points
Posted by Heather Comer
Heather Comer
1,956 Points

Adding a background-image with linear gradient. My coding works, but it says I'm not using the background-image property

My coding works, in the viewer. It keeps saying bummer. I have tried it with two and three colors, and none of them work.

style.css 
/* Complete the challenge by writing CSS below */
.main-header {
    background: #ffa949;
  background-image: linear-gradient(#ffa949, dodgerblue, 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 -->
  </body>
</html>

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hi Heather,

You don't state which task you are on, but I'm assuming it's the third because of the items you have in the CSS rule?

You've pretty much got it, except you seem to have a few things going on there, just some things that either were not ask for in the instructions or not exactly what the instructions stated need to be done.

  1. The instructions never asked you to set a background color, so that line will need to be deleted.
  2. The instructions ask for a start color and and end color, but you seem to have three colors, so the hex color (as that was not asked for) needs to be deleted.
  3. The instructions are very specific in which colors are to only be used, so those will need to be set properly.

It'll be good to remember that challenges are very specific and extremely picky. If you do what is not asked, delete or add code that wasn't instructed, not use exactly what is said to be used, etc... the challenge will fail.

Once you fix those up, you're all good to go for the forth task.

:) :dizzy:

Heather Comer
Heather Comer
1,956 Points
Heather Comer
Heather Comer
1,956 Points

I figured it out. In the task, it just asked me to write a rule, so I chose background-color and gave it a value. (How else can you preview whether it works if you don't have an actual rule) I thought it would be wrong because it didn't ask for it, but it said it was correct, so I thought it was okay to make up my own rule. :) When it came to this task. It still allowed me to put in whatever color, because it hadn't specified which colors yet, but I had to create a separate tag instead of stacking them. When I separated them, it accepted it. I did end up deleting that rule in the third task when it gave me the actual colors. Thank you for your time! And you are right! I just didn't know how to come back here and delete my question!