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
Scott Peake
17,052 PointsWhy is there a color BEFORE the background-image?
I totally understand the concept of layering (top to bottom, etc.), and I am cruising through this lesson, but there's something I am confused about. I have been closely following along, but apparently I missed where something was added, and there is some code I am not sure of?
When we add the linear-gradient to a layer over the mountains image, I notice that there is already a color in front of the url.
background: linear-gradient (#ffa949, transparent 90%), #ffa949 url('../img/mountains.jpeg') no-repeat center;
Why is there the same color declaration in front of the url? Why am I missing this?
4 Answers
Wayne Priestley
19,579 PointsHi Dorsett,
The reason for the colour is just incase a browser has trouble loading the image or gradient. That way there will be a solid colour to fall back on.
Hope this helps.
Scott Peake
17,052 PointsOh yeah! Probably should have waited for the caffeine to set in before I posted. Either that or I really should check the CSS property index.
I think I had problems because I often get confused with the use of "DEFAULT' in CSS/HTML code as opposed to a default setting being included as an attribute. (Does that make sense?) I think I focus too much on the most basic, simple operators in CSS (border-top, border-bottom, etc.) as opposed to using the single line hybrid (border).
Thanks again Wayne!
Wayne Priestley
19,579 PointsFocusing on the basics is okay, there are plenty of websites out there that can help you with the other stuff as you go along.
Eventually you will pick most of it up through practice.
Anna Grais
12,743 PointsWhat I don't understand is why it is placed before the image and not after, because you mentioned in the video that the first value would be the top layer, but how come the orange color still remains behind the picture? Is it because the color and the URL aren't separated by a comma?
Burak Samra
2,431 PointsHey Anna,
that goes for lines separated with commas. But the line where there is the solid orange color just before the image url is a single line, where there is a solid color background and an image loaded on top of it (with the no-repeat and center properties. So the solid color and the image are not layered like the transparency layer.
If you have a relatively slow internet connection like I do, you can actually see the solid orange background appear in the header just before the mountains.jpg is loaded. :)
Hope this helps, cheers!