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
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsWhy the background property and not the background-image property?
Hi I was wondering why Guil used the background property instead of the background-mage property?
4 Answers
Chris Shaw
26,676 PointsHi Samuel,
The background-image property accepts only one single and/or plural value that references the url() function, unlike in the video if we were to use the entire value within the background property browsers such as Chrome and Firefox would parse the value but wouldn't use it since it can't contain the background-position and the background-repeat.
Correct use for background-image
body {
background-image: url('image.jpg');
}
Incorrect use for background-image
body {
background-image: url('image.jpg') 100px 100px no-repeat;
}
Katsumi Suno
4,194 PointsHey Samuel Lawrence,
maybe it helps if another beginner tries to explain it how he understands it...so here we go :)
The "background" property is a so-called shorthand property. It allows you to define all the following property values in one property:
background-color
background-image
background-repeat
background-attachment
background-position
So if you type something like this:
background: url(../img/image.png) no-repeat right;
... you actually combined (in this order) "background-image", "background-repeat" and "background-position" in the one shorthand property "background".
As someone new to Web Design myself I found http://www.w3schools.com/ a very helpful CSS reference that provides more details but don't overwhelm you with technical textual wasteland. In addition it helps you with interactive examples.
Hope I could help, even though it's quite late ;)
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsThanks buddy. Yes you did.
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsOk, thanks for the rapid response, however I don't think my level of understanding about CSS is high enough to grasp what you're saying. I will keep at it. I haven't gotten in depth enough yet I think.
Chris Shaw
26,676 PointsHi Samuel,
Have a read of MDN's explanation and examples as they have far more details information that shows what background-image can be used for.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsOk will do. Thanks for the support.