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

Posted by Anil Cherian
Anil Cherian
6,618 Points

Next, add a background-image property and define a linear gradient function as the value. what is the answer to this?

my answer is

.main-header { background-image: linear-gradient(to top, blue, orange);

}

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

.main-header {
  width: 100%;
  background: linear-gradient(to top, blue, orange);
}
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>

4 Answers

Pavithra Manivannan
Pavithra Manivannan
7,474 Points
Pavithra Manivannan
Pavithra Manivannan
7,474 Points

background: linear-gradient(to top, blue, orange); this is the answer

Anil Cherian
Anil Cherian
6,618 Points

thank you this was the best answer

ak61
ak61
2,497 Points

It worked, thank you!

Angel Canton
Angel Canton
4,009 Points
Angel Canton
Angel Canton
4,009 Points

.main-header { background-image: linear-gradient (); }

Jessica Felicio
Jessica Felicio
3,242 Points

This worked for me!

Robert O'Toole
Robert O'Toole
6,366 Points
Robert O'Toole
Robert O'Toole
6,366 Points

u agree this is a silly question tho right? kind of arbitrary how it can be answered

Walt Ribeiro
Walt Ribeiro
4,496 Points
Walt Ribeiro
Walt Ribeiro
4,496 Points

There's a bug in this question. This answer did not pass:

.main-header { width: 100%; background-image: linear-gradient(to top, blue, orange); }

But after I flipped it, then this one did:

.main-header { background-image: linear-gradient(to top, blue, orange); width: 100%; }

Unless that's by design?

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

Try using background instead of background-image.