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

Stacy Fabian
Stacy Fabian
2,246 Points

When to use "background:" and when to use "background-color:"?

In showing how to change the CSS styling of background colors, sometimes the videos instructs to use "background" and sometimes it instructs to use "background-color", maybe I missed it, but I can't tell how to quickly know when to use which one? If anyone can "dumb it down" or "simplify" it for me, that would be awesome. :)

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

Background is a 'shorthand'. Background-color is very specific. It is expecting a color. Background could be a color, or an image, etc. I usually just use the background shorthand because it's faster to write.

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Michael Hulet
Michael Hulet
47,913 Points

I'm pretty sure they're interchangeable, but I personally just use background in every situation. It makes changing the background with JavaScript easier, and it's also technically shorter than background-color, which theoretically saves file size and thereby network load and transmission time, but the difference there is so small that it's virtually nonexistent. As far as I understand, though, it's really your choice

Stacy Fabian
Stacy Fabian
2,246 Points

Ok, that's what it seemed like to me but I wanted to make sure I wasn't missing something. Thanks!