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

Posted by Calin Balea
Calin Balea
3,532 Points

Why are background layers declared top-to-bottom not bottom-to-top (i.e. cascading... like CSS in general)?

In CSS we're used to having newer declarations override old ones. The background rule inverses that logic.. it's a bit unintuitive. Is there a reason for that? When designing UI you first draw the container, then place the image, then add an overlay to it. With how this rule is working, you're supposed to think about elements from the top-most layer to the lowest. I understand how it works... i'm just saying it's unintuitive at first sight. Maybe there's a logic i'm not seeing.

2 Answers

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

So the background CSS property has nothing to do with CSS rules. Let me explain!

background: linear-gradient(#369, #678), url('some.jpg');

has nothing to with this

background: linear-gradient(#369, #678);
background: rl('some.jpg');

can you find the difference in both? First code shows us how the background layer is appended one above the other, in which, image will be top layer and gradient will be last.

However, in second code, we see CSS rules overriding new background with old background. To set, more than one background layer we just pass all our choice separating with a comma, in which the layer we put last will always occur first(which is pretty obvious).

Axel Perossa
Axel Perossa
13,930 Points

"[...]other, in which, image will be top layer and gradient will be last."

In your example the image will be the bottom layer, and the gradient will be drawn over it. Just a clarification of wording, in case someone else finds it confusing. Thanks

Calin Balea
Calin Balea
3,532 Points
Calin Balea
Calin Balea
3,532 Points

Hey. Thanks for your response. I understand the difference. It just seems to me like it should be the other way-round. The first layer / declaration of the background rule should be the on the lowest level, and the next ones should be above, no below. It makes sense to build from bottom up not top down... feels like building the roof first, and floor later :)

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

I think the notion is pretty much ok! think background as a box. the item u keep last will always appear at the top in the box and the item you keep first always be last. If you like explanation please mark it as the best answer. :)