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 CSS Basics (2014) Basic Layout Basic Layout Review

Posted by Katsumi Suno
Katsumi Suno
4,194 Points

Wrong answer in Quiz...

I got one quiz question wrong and I think it's a mistake:

"Bummer! Sorry, but that's not right. The value cover displays the full image while maintaining width and height proportions."

"cover" doesn't display the full image, "contain" does. "cover" FILLS the parent element while maintaining proportions, which means the image can get cut off. On the Lake Tahoe header for example the image gets cut off on top and bottom in order to COVER the whole element.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What is the whole Question and ur code?

Katsumi Suno
Katsumi Suno
4,194 Points

Q: "Which background-size value displays the full image while maintaining the width and height proportions?"

Possible Answers are: auto, contain, cover, no-repeat

The supposedly correct answer is cover with the statement in my post above, which I say is wrong. contain should be the right answer.

2 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Look

COntain means this " Scale the image to the largest size such that both its width and its height can fit inside the content area"

Which means that the image will be 'stretched' and so it will not have it's own proportions.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Cover however, will not strethc, but the image will go it's full height and width, without strething, having it's proportion.

Proportion is the key here, You don't want to stretch the image, as it will lose proportion, so you make it a cover.

Katsumi Suno
Katsumi Suno
4,194 Points

No, as far as I can see, "contain" does not stretch the image. On the page you've linked is a "play it" link where you can test the differences:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

If you set the background-size to 100% 100% the image gets stretched the way you probably meant. But "contain" scales proportionally until either the width or the height fits in its parent element, therefore the whole image is visible. And "cover " scales until the parent element is filled (or covered if you will) but cuts the image if it has a different aspect ratio than its parent. Check out the above link where you can easily compare the effects.

Jonathan Scheel
Jonathan Scheel
5,029 Points
Jonathan Scheel
Jonathan Scheel
5,029 Points

I agree this answer is inaccurate. Cover, in fact, does stretch the image background to "cover" the full div's dimensions completely, cropping the image as necessary to make sure every pixel of the div is covered. Contain shrinks the image to fit within the div, but making sure the full image is displayed. Neither of these options distorts the height or width proportions, so that part is irrelevant. The explanation, "The value cover displays the full image", is wrong. Cover "crops" the image if the div container is not the exact dimensions of the image so that the full image is NOT displayed in such cases. Only "contain" displays the full image within the dimensions of the div and should be the correct answer to this quiz question.