Difference between background-size:cover and background-size:contain

Question

Visually I can appreciate the difference, but in which situations should I prefer one over the other? Is there any point using them at all or can they be replaced by percent

Answer 1

background-size:contain;

When using contain you may still see white-spacing, due to the way that it sizes and contains itself within the element.

background-size:cover;

will completely cover said element, you will not see any white-spacing

source:

http://www.css3.info/preview/background-size/

see example H

edit: use background-size:contain if: You want it so that your image is always displayed in the viewport. Please note that: while you can see the full image, it will leave white spacing either on the top or bottom of the image whenever the aspect ratio of the browser and window are not the same.

use background-size:cover if: You want a background-image, but you don't want the negative effect of the white-spacing which contain does have, please note that: when using background-size:cover; you may experience that it will cut off some of the image.

source: http://alistapart.com/article/supersize-that-background-please