Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

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?

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

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

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!

Wayne Priestley
Wayne Priestley
19,579 Points

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

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?

Hey 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!