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
George Chatzispiros
2,912 PointsExplain the difference between the 100% value in background-size property and cover value.
Does the cover value distorts the image width and height so that it fits the outside element? Also does the 100% percentage fits the box and leaves horizontal and vertical spaces when we resize the browser window?
2 Answers
Patrik Horváth
11,110 Points-
background-size:100%;is same asbackground-size:100% auto;= the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio. -
background-size:cover;means the background image will always fit the whole div , you won't be left with any empty spots in your div -
background-size:100% 100%;won't leave any empty space too, but of course this will destroy the original image aspect ratio
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Pointscover = 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.
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
See this Link for example. Hope it helps. Happy Coding. :)