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
Daniele Manca
10,986 PointsMy 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...
Daniele Manca
10,986 PointsHy 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
Szymon Dabrowski
Courses Plus Student 2,816 Pointsbody { @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.
Daniele Manca
10,986 PointsThanks 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...
Szymon Dabrowski
Courses Plus Student 2,816 PointsIf 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.
Daniele Manca
10,986 PointsNot 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??
Szymon Dabrowski
Courses Plus Student 2,816 PointsSzymon Dabrowski
Courses Plus Student 2,816 PointsYou 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.