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 Transparent Gradients and Multiple Backgrounds

Posted by Hanna Han
Hanna Han
4,105 Points

Multiple background doesn't work

I have coded exact same way the teacher shows in the video but it doesn't show the same result.

Here is the link to the webpage where I got as result. http://port-80-44an1ttcoy.treehouse-app.com/

Here is the code

.main-header { padding-top: 170px; height: 850px;
background:linear-gradient (#ffa949, transparent 90%), #ffa949 url('../img/mountains.jpg') no-repeat center; background-size: cover; }

3 Answers

Kieran Barker
Kieran Barker
15,028 Points
Kieran Barker
Kieran Barker
15,028 Points

Hey, Hanna!

Your declaration is actually different.

Here's yours:

linear-gradient (#ffa949, transparent 90%), #ffa949 url('http://port-80-44an1ttcoy.treehouse-app.com/css/../img/mountains.jpg') no-repeat center

Here's Guil's:

linear-gradient(#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), #ffa949 url('../img/mountains.jpg') no-repeat center

Which means you have a syntax error :-)

Hanna Han
Hanna Han
4,105 Points
Hanna Han
Hanna Han
4,105 Points

The teacher has tried first with the syntax that I wrote and showed its result and then tried with the syntax with that you wrote in your answer.

This following sytax is exactly same as the teacher wrote for his first try.

.main-header { padding-top: 170px; height: 850px; background:linear-gradient (#ffa949, transparent 90%), #ffa949 url('../img/mountains.jpg') no-repeat center; background-size: cover; }

Alex Franklin
Alex Franklin
12,403 Points
Alex Franklin
Alex Franklin
12,403 Points

If you eliminate the space between "linear-gradient" and "(#ffa949..." and the code will work as intended. So do not use any spaces.

--------- " linear-gradient(#ffa949, trans.... " ----------

*Mr Barker - - if you can't explain it to a six year old, then you don't understand it yourself...