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
Andre Lacerda
9,455 PointsCSS: Transparent Gradient and Multiple Background Lesson
Hello Everyone,
I am following the instructor on this lesson but for whatever reason I can't get the linear gradient to work. Please look at the code below. If I remove the linear gradient code, I get to see the image but when I add the linear gradient code the background goes completely white.
background: linear-gradient (#ffa949, transparent 90%) ,
linear-gradient (0deg, #fff, transparent) ,
#ffa949 url('../img/mountains.jpg') no-repeat center;
Is anybody else having the same issue?
Thanks
3 Answers
Sue Johnson
16,648 PointsI have managed to replicate the error. Where you have got linear-gradient (#ffa949, transparent 90%) you have got a space between the linear-gradient and the opening bracket, there should be no space like this: linear-gradient(#ffa949, transparent 90%). Same with the others.
Sandeep Krishnan
9,730 PointsHello,
Is there an impact on the sites performance when we add gradient to background-image ? I saw some loading issues in your video thus asked.
Andre Lacerda
9,455 PointsYes, it does impact the performance.
Andre Lacerda
9,455 PointsAndre Lacerda
9,455 PointsHi Sue, you are 100% correct. I have removed the space between the linear-gradient and the opening brackets and everything works now. I appreciate you taking the time to help me out.
Thank you!
Andre