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

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,939 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.

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