Welcome to the Treehouse Community
Looking to learn something new?
Why 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?
Wayne Priestley19,579 Points
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.
Oh 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!
What 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?
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!