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
audreysalerno
4,289 PointsShould be background-size: contain, NOT cover
The video, teacher notes, and code challenge have confused cover and contain.
The notes and instructor commentary state that using background-style: cover does the following: "cover: The cover value adjusts a background image so that we're able to see the full image, while maintaining its width and height proportions"
But, according to W3C: "cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area . contain: Scale the image to the largest size such that both its width and its height can fit inside the content area."
In the code challenge, cover and contain look to behave the same, due to the image size and content area of the element, so the difference is not visible without changing the background image file. The unit test is looking for cover, which is incorrect.
This mixup also explains both of the issues users posed in the related questions: https://teamtreehouse.com/forum/background-image-isnt-fully-visible https://teamtreehouse.com/forum/assigning-background-image-to-a-div-issue
2 Answers
Guil Hernandez
Treehouse TeacherHi Audrey Salerno,
There really wasn't a mix-up between cover and contain. However, I do think that by stating "we're able to see the full image," I may have caused some confusion. By full image, I meant the full background area – the image is fully proportional covering the entire background. :)
The value contain displays the full image at all times, but it doesn't always cover the entire background area.
I just adjusted the teacher's notes in the video. Hopefully now it's less ambiguous. Thanks!
Sara Border
4,061 PointsCan you also change the wording in the code challenge? This was extremely confusing.
audreysalerno
4,289 Pointsaudreysalerno
4,289 PointsThanks for the reply. The updated notes clarify.
The code challenge question also states: "Set a value that will display the full image while maintaining the width and height proportions."
As agreed, the only way to guarantee display of the full image is to use
contain, yet the accepted answer iscover, which most of the time will not display the full image. If the desired action iscover, the question should read something to the effect of, "Set a value that will fill the whole background area while maintaining the width and height proportions."