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 Backgrounds: Size and Position

Stephen Bolton
Stephen Bolton
Front End Web Development Techdegree Student 7,933 Points

isn'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.

Gabriel Ward
Gabriel Ward
20,222 Points

Hi 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.

1 Answer

See 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