Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Layout Backgrounds: Size and Position

Stephen Bolton
seal-mask
.a{fill-rule:evenodd;}techdegree
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