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
Jeff Chester
2,403 PointsCSS - Fonts and Colors Code Challenge
So, I'm stuck on task 4 of the Fonts and Colors Code Challenge. Here is my code:
body {
font-family:'Nunito', sans-serif;
color: #FAF3BC;
background-color: #420600 url('img/texture.png') repeat;
}
However, I'm getting this error. Everything looked fine on task 3. I had the red background and yellow text with Nunito as the font. Then when I hit "Check My Work" on task 4 it makes the background white and tells me task 3 is incorrect now.
I found a couple other posts about this challenge but they were all using the wrong code. The above code is the solution given on each of those posts, yet I'm still getting an error. Is it just a glitch or am I missing something?
Thanks in advance for any help!
5 Answers
Jakob Pfefferkorn Bohn
800 PointsYep, it's a bit tricky because the background-color property will work for just a simple color, but when you add an image you have to use the background property instead or it won't work.
James Barnett
39,199 PointsWhen specifying background colors, background images and repeating images as a single property you can use the background property as shorthand.
Jeff Chester
2,403 PointsThank you! I guess my next question is why even have the background-color property if background: #420600; works just as well?
Jakob Pfefferkorn Bohn
800 PointsI wanted to know too, so I looked it up over at w3C.
Basically there are five different background properties: background-color, background-image, background-repeat, background-attachment, and background-position.
As James said above, background is actually a shorthand property that allows you to combine any of those five properties under a single selector.
To answer your question of why have the separate properties if the shorthand works as well, I'm guessing that the individual properties came first, and the shorthand was perhaps developed later?
James Barnett
39,199 Points@Jeff - The main reason you would use background-color: #420600 over just background: #420600 is if you are planning on later specifying a background-image.
You don't have to use the shorthand versions of properties, it's really just a matter of your own personal coding style. You can read all about the various CSS shorthand properties over on this blog post.