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

Ryan McMaster
Ryan McMaster
3,842 Points

having color value twice in the code causes a white background

So, in doing this lesson I had been following Guil's instructions but when I would save my CSS, I would get a white background.

I noticed it defaulting out to white, for no apparent reason, even in the dev tools.

This was my fix. Is this bad form or?

background: linear-gradient(#ffa949, transparent 90%), url('../img/mountains.jpg') no-repeat center;

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points

Strange that this is happening, and I would like to see your code as I do not have the same issue. But in any case to answer your question that is not bad form. You can leave values out of the css background shorthand property as long as they are in the correct order, (which yours are). I am not sure why Guil defines the linear gradient and then still defines the solid background color of the same color afterwards, it could be so that if the user's computer does not support gradients for whatever reason, it still has a solid background color (or images for that matter). Hope this helps.

When using the shorthand property the order of the property values is:

background-color background-image background-repeat background-attachment background-position

It does not matter if one of the property values is missing, as long as the other ones are in this order.

1 Answer

I had the same issue because I had a space between 'linear-gradient' and the left parenthesis. Double-check that and let us know if it helps.