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

CSS: 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

I 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.

Hi 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

Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Hello,

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.

Yes, it does impact the performance.