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) Basic Layout Backgrounds: Size and Position

Posted by Jason Tracy
Jason Tracy
1,331 Points

Recommended order of background shorthand.

I've already completed this lesson but while I was rewriting my shorthand notes I noticed a difference in the suggested order of background properties. According to CSSTricks.com, any combo and order will work but the recommended order is:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Why is the recommended order on Treehouse listing the background-color property first, but CSSTricks lists it as the last? I'm assuming CSSTricks.com is an updated and reliable(?) resource, so if someone could clear this up for me I'd appreciate it.

EDIT:

So after looking into it further, CSSTricks was the only resource that listed it last, but I did see this notation at W3schools:

If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

Can someone explain why? And, if I'm not using multiple background images, is it considered bad practice to list the background-color property last?

1 Answer

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

If you go straight to the source http://www.w3.org/TR/css3-background/#the-background you'll see they list the properties in a particular order, which may be why you've seen other sites recommend listing them in that order. However, you'll see in some of the examples (specifically 16 and 17) that the properties are not in that order, and I don't see it mentioned anywhere that they should be listed in a particular order. The only thing I see clearly mentioned about background color is that it needs to be listed with the final background layer if multiple layers are defined. It does not mention that it needs to be last.

Jason Tracy
Jason Tracy
1,331 Points

Thank you, I should've been using w3.org as a reference in the first place.