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 Compass Basics Getting Started with Compass Getting Started with Compass

My code doesn't work

I am trying to include the linear gradient with the below line of code:

@include background-image(linear-gradient(#3d69b5, #1a335e));

Doesn't work though...

You need got it completely wrong but don't worry! It took me a while to understand it too. You would want to use:

Make sure that you also start with a class or an id for example:

.main-header { " background: linear-gradient( (stop color 1), (stop color 2) ), " }

You can add more than one "linear" or "radius" just under your first one. Remember that the gradient will stack. linear-gradient( (stop color 1) , (stop color2) ),

I suggest that you complete the CSS basics course where you will be able to learn how to set linear and radius gradients and go into more detail with them such as making gradients transparent.

Hy Szymon, apologies but I am aware of gradients in vanilla css, what I am trying to figure out is why the compass mixin I am trying to include isn't working, can you help with that?

2 Answers

body { @include background-image(linear-gradient(left, right, #3d69b5, #1a335e)) }

Did you select the component? and You don't need the semi colon over there and I think because of it the html ignores your code let me know if that works.

Thanks for helping Szymon, however your line of code still doesn't work, I get the same error as before, which states: Make sure you're including the correct mixin in the body rule.

I really don't understand, looks like an obvious thing that it should work, but doesn't...

If it isn't that it must be something within your code. Try validating your code by using W3C CSS validator and see if there are any errors.

Not too sure about validating the code to be honest, the error is clearly stating that I might not be placing the include within the body tag, which I am. Will wait for someone else to provide an alternative answer, Guil Hernandez maybe??