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

Posted by briand
briand
4,254 Points

Why use background-color CSS property?

Given that I can change the background color of an element by using either the "background" or the "background-color" property, why would you ever use "background-color"? Is there any situation where it is preferable or even necessary?

4 Answers

Erik McClintock
Erik McClintock
45,783 Points

Brian,

The background property is a shorthand way of declaring one of many specific background- related properties, such as background-image, background-position, etc. The usage of either background or background-color is really up to the developer, as they can both achieve what you're looking for. That said, I personally tend to develop with the specific, individualized properties (e.g. background-color, padding-left, etc.) as it helps to keep things a) a bit easier to understand when looking at the code, as everything is very specific, and b) a bit easier to maintain. It can also help to organize your CSS blocks into related chunks.

It's up to you!

Erik

John Shockey
John Shockey
45,061 Points
John Shockey
John Shockey
45,061 Points

The background property is shorthand usage that can set multiple background properties in one declaration. Like when adding a background image it is easier/cleaner to write:

body { 
    background: #00ff00 url("smiley.gif") no-repeat fixed center; 
}

versus:

body { 
    background-color: #00ff00;
    background-image: url("smiley.gif"); 
    background-repeat: no-repeat;
    background-position: fixed center; 
}
anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

you may want to split your code up into different property values and use the color property separate. People do this when splitting css code into organized sections like gill does. He puts colours and that specific code in a separate area from the background image and such.

briand
briand
4,254 Points
briand
briand
4,254 Points

Thanks for your input. Much appreciated. Looks like sticking with long form may be the way to go then.