html - 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 percentages?

Currently I don't seem to be able to go beyond a trial-error approach when using these properties, which does my head in.

Also I can only find pretty vague explanations and especially I find the W3C doc quite baffling.

Values have the following meanings:

‘contain’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

‘cover’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

I'm probably being a bit thick, but can anyone give me a plain English explanation with relative examples?

Please use this fiddle. Thanks.

CSS

body{
    width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-size:contain;
    background-repeat:no-repeat;
}

Note

The accepted answer is the one I currently find the most concise and complete. Thanks everybody for their help.

Answer 1

You can consider looking at the pseudocodes that govern the output. The values allotted to the image's size depend directly on the aspect ratios of container wrt aspect ratio of the background image.

Note: Aspect ratio = width / height

Contain

if (aspect ratio of container > aspect ratio of image)
    image-height = container-height
    image-width = aspect-ratio-preserved width

else
    image-width = container width
    image-height = aspect-ratio-preserved height

---

Cover

if (aspect ratio of container > aspect ratio of image)
    image-width = container width
    image-height = aspect-ratio-preserved height

else
    image-height = container height
    image-width = aspect-ratio-preserved width

You see the relation? In both cover and contain, aspect ratio is preserved. But the if - else conditions reverse in both the cases.

This is what makes cover to cover full page, without any white portion visible. When aspect ratio of container is greater, scaling image so that its width becomes equal to container width. Now, height will be greater, as aspect ratio is smaller. Thus it covers the whole page without any white portion.

Q. Can they be replaced by percentages?

No, not simply by percentages. You'll need conditioning.

Q. In which situations should I prefer one over the other?

When you are creating a website, you wouldn't want any white portion in the fixed background. So use cover.

contain on the other can be used when you are using a repeating background (e.g. when you have a pattern image with very high aspect ratio wrt veiwport/container you can use contain and set background-repeat to repeat-y). But a more appropriate use for contain would be for a fixed height/width element.