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
Stephen Bolton
Front End Web Development Techdegree Student 7,933 Pointsisn't background-size: cover; the same as background-size: 100%;
just wondering because to my eye when I try both values it looks the same and to me background-size: 100% makes more sense.
1 Answer
Irina Blumenfeld
9,198 PointsSee an example I created: http://codepen.io/netmagik/pen/vEvjaG
background-size: 100%;
The image will fill entire width of the parent container, but not height. Aspect ratio will stay the same
background-size: cover;
It will zoom in to fill the parent container. Some of the image will be cut off
background-size: 100% 100%;
The image will fill entire width and height of the parent container, but it's aspect ratio will be destroyed
Stephen Bolton
Front End Web Development Techdegree Student 7,933 PointsThanks for the answer should have tested it myself in codepen!
Gabriel Ward
20,222 PointsGabriel Ward
20,222 PointsHi Stephen,
I think background-size: cover will fill the entire background area by zooming in, so that the photo keeps its proportions, which means some of the image may be cut off.
background-size: 100% will fill the background area by using the whole image. So the width will be 100% but the height will be altered so that the proportions change.
That's how they work as far as I understand it.
Hope that helps.