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 Responsive Web Design and Testing Write CSS Media Queries

Posted by Tara Stevens
Tara Stevens
1,236 Points

Which is the correct CSS declaration - background, or background-color? Are they interchangeable?

The tutorial on Responsive Web Design has me a little confused on how to change the color of a background correctly.

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

@media screen and (min-width: 480px) {
  body {
    background: navy;
 }   

@media screen and (min-width: 660px) {
  body {
    background: darkgreen;
 }

3 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Tara,

"Background" is a shorthand property that allows you to apply multiple background styles in one declaration, rather than having to write them all out individually. It is a shorthand just like "border" is a shorthand property (encapsulating border properties like border-width, border-style, and border-color). There are many background-XX properties, and having to write them all out one after the other isn't always preferable, though it is largely a matter of opinion. There is not really a right or wrong, per se, though if you only want to change the background color, you may as well use background-color to be more specific and clear.

For more information on the background shorthand property, check out the MDN entry for it!

Hope this helps to clear some things up!

Erik

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Background is a shorthand for setting several background properties in a single declaration. You can review the MDN page here for more information on the other properties you can set.

Background-color only sets the color of the background.

If you use the shorthand background to set just the color, all of the other values will just be set to their defaults. It's pretty common to do this.

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Tara,

In a sense, they are inter-changeable. background is just short hand to set a number of different background values. This is also done with margin and padding etc.

You can read a more in-depth answer here.

I hope that helps. Keep Coding! :)