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 trialYi Ren
4,990 PointsBackground 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
6,304 PointsThe "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
9,182 PointsBackground 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
Courses Plus Student 5,174 PointsI 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.