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 trialRyan McMaster
3,842 Pointshaving 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;
1 Answer
Josh Kellough
3,748 PointsI 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.
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 PointsJustin Goldby
Full Stack JavaScript Techdegree Student 12,754 PointsStrange 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.