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 Foundations Backgrounds and Borders Advanced Backgrounds

Posted by davidschreiter
davidschreiter
15,005 Points

Order of background image and color?

Previously we learned when using background: (shorthand) that we give the color before the image. i.e.

background: color image

But when we used the shorthand to start layering images we ended up putting the color at the end. i.e.

background: image1, image2 color

Of course it makes since with the first being the top layer and the last being the bottom layer.

I guess my question is does it even matter the order we place the background image and color? Is when we just have one background image we place the color first and when we layer we place the color last?

davidschreiter
davidschreiter
15,005 Points

To clarify, i do realize the color is there as a failsafe in case the images can't be loaded.

1 Answer

Matthew Orndoff
Matthew Orndoff
9,018 Points
Matthew Orndoff
Matthew Orndoff
9,018 Points

David,

According to the MDN documentation:

Note: The background-color can only be defined on the last background, as there is only one background color for the whole element.

Also I was messing around with this on codepen, and as MDN states, the only way you can add a background-color with multiple images is when the color is placed at the end.

With only a single image though apparently the color can go before or after the url() declaration.

davidschreiter
davidschreiter
15,005 Points

Thanks Matthew for the response. That helps clarify.

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points
Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

Thanks for this Matthew! Actually, I have never tried this before. Thanks for the heads up! I can say that you just saved me a couple of hours banging my head against a wall in the future. LOL!