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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Posted by Yi Ren
Yi Ren
4,990 Points

Background vs Background-color

what's the difference between background and background-color? it seems like they both have the same property.

3 Answers

Sarah Hoopes
Sarah Hoopes
6,304 Points

The "background-color" property specifies the background color of an element.

For example,
background-color: #000000;

"Background" sets all the background properties in one declaration. It's the shorthand property.

For example, background: #000000 url("cat.jpg) no-repeat right top;

So with "background", you can do color, image, repeat, attachment, position.

Leo Picado
Leo Picado
9,182 Points
Leo Picado
Leo Picado
9,182 Points

Background is the whole definition for the element, it's made of a lot small bits, much like the "font" property, so

div {
  background: url(https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01) red top left no-repeat; 
  // this is the same as  
  background-color: red;
  background-position: top left;
  background-repeat: no-repeat;
  background-image: url(https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01);
}

One thing to keep in mind that is that since background has a wider range of action than background-image, it can lead to unexpected results depending on the order, so for instance:

div {
 background: url(https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01) red top left no-repeat; 
 background: none; // overrules anything before it, unlike...
}

div {
  background: url(https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01) red top left no-repeat;
  background-color: none; // this only gets rid of the background-color, the rest stays the same
}
Casey Antoine
PLUS
Casey Antoine
Courses Plus Student 5,174 Points
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

I believe the background property also allows you to set an image for a background along with color, etc. Whereas background-color is usually specific to applying colors for the background.

Hope this helps.