What is the difference between background-size: cover; and background-size: 100%;?

css background-size
Andreas Furster picture Andreas Furster · Jul 9, 2014 · Viewed 17.6k times · Source

When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.

What is the difference? When should i use cover and when 100%?

Answer

Michael Durrant picture Michael Durrant · Jul 9, 2014

cover = 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.

If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.

Your Question: Why would they looks the same ?
Answer: If the image / container are square

See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example

Related questions

CSS background-size: cover + background-attachment: fixed clipping background images

I have a list of figures containing background images. Something like the following: <ul> <li> <figure style="background-image: url(...);"></figure> </li> <li> <figure style="background-image: url(...);">&…

Read More
background-size: cover not working in portrait on Android tablet

I'm using the background-size property for a full width and height background image but having trouble getting it to fully cover in Chrome on a Nexus7 tablet in portrait view. It only covers the width and not the height i.…

Read More
Background-size with SVG squished in IE9-10

I have a div set with a background image: <div>Play Video</div> with the following CSS: div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150…

Read More