Differencebetween Background-Size: Cover; and Background-Size: 100%;

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

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

Difference between cover vs 100% auto for background-size in css?

The difference is with aspect ratio. When using cover, all of the screen will always be filled no matter the ratio. But when using 100% auto, if the screen is relatively higher than the image itself it will leave an empty space at the bottom (assuming it positioned at the top with no-repeat).

Cover versus 100% auto

To best see the effect by the way, the pen would need to be viewed on a screen that allows the content window to have at least 300 pixels height (in other cases it would need a resize). Can't seem to locate the full page view anymore with the recently changed layout there...

background-size: cover only fits width

Make your page cover the hole viewport:

html, body{
   height: 100%;
}

or use min-height.

Is there anyway to set background-size to both contain and cover?

By setting the background size to cover you are giving the browser the prerogative to adjust the image until it completely covers the area; it will ignore width and height values you assign.

With contain you allow the browser to decide how to adjust the image so that the entire image fits within the area, which may be based on height or width to accomplish this (depending on the orientation of the image wide or tall).

background-size: 100% 100% is probably what you're looking for, but that will disproportionately adjust the image (ie: stretch or compress depending on orientation). However, it does sound like that's what you want when you say "both cover and contain".

There are many ways to place and scale images used as backgrounds (where background does not necessarily mean the CSS background property)

Below is a simplified example of how I've accomplished this (assuming images that are roughly 700x300 px)

.container-wrap {
     width:100%;
     }
 .container {
     position:relative;
     padding:42.86% 0 0 0;
     /* where padding = the proportion of the images width and height
     which you can get by division: height / width = 0.42857 */
     }
 .container img {
     position:absolute;
     top:0px;
     right:0px;
     bottom:0px;
     left:0px;
     }

it is important that your images maintain a close proportion to each other -- if they are slightly off, the slight distortion shouldn't be visible to most people for most images

Again, there are other methods to accomplish this. The website you linked to applies a similar concept. The concept is the same, method is slightly different (for example they are using width:100% on the images instead of absolutely positioning them), where the concept = "using some sort of method to proportion the images to the container so it will magically scale"

Note that the same method can be applied to video containers (such as from YouTube).

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

Background size cover is not working

Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided.

From the screenshot, it seems like your element doesn't have a fixed width and is taking up 100% of the available width and also that the width is a lot higher compare to the height of the element.

(The above assumption has been confirmed by your live link.)

As per specs, the cover keyword has the following definition:

cover

A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

The key parts that are relevant for this question have been emphasized. As you have indicated, in this case, the image's dimensions is 1000 x 1000 whereas the container's dimensions is [Y] x 550 where [Y] seems to be higher than 550. Now, let us assume that [Y] is 750. This would mean that the image will be scaled such that it has to fit the entire width (as it is larger). Since image has 1:1 aspect ratio, it would be scaled down to 750 x 750. Thus the image's height is greater than the container's height and so the bottom part of the image will get cropped.

You can see that in the below snippet also. The first image is the background with cover whereas the second is the actual sized image.

div {  height: 550px;  background-image: url(http://lorempixel.com/1000/1000/nature/1);  background-position: center center;  background-size: cover;  background-repeat: no-repeat;}

<div></div><img src='http://lorempixel.com/1000/1000/nature/1' />

background-size in different browsers

body {
  background: url(image.jpg) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',     sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
}

These are the requirements for cross browser. There's like 5 of these exact questions already on stack overflow with answers exactly like mine so there was no need to ask this question

Conditions when background-size: contain doesn't display background-image

So, here's what's going on

if you set your element's height by percent, CSS will look up to element's father to use his height and calculate element's height

if father has a specific height, it will calculate and get the height
But if father's height is set to auto (which is default for almost all html elements) CSS can not calculate height!

lets assume you set your body's height to 50% so CSS should multiply body's father(html) height by 50 and divide the result by 100, why it can not accomplish this task?
b'Coz : auto * 50 / 100 = ???

but if the parent(html in your case) has a specific height( assume it 400px ) CSS can easily calculate that :

400 * 50 / 100 = 200px

that is why neither height:auto works like you want nor height:100%

because in both scenarios your body's height is set to auto and auto means take as much size as your children need(your body is empty right? so the height will be 0)

but when you say height:800px it will take the height simply regardless of body's children

now,
if you want your body to get exactly same size of user's viewport
you can use vh and vw CSS units

Firstly, check out https://caniuse.com to see if your target devices support those units

then you can say

body{
    width: 100vw;
    height: 100vh;
}

this will say your body element should have all 100 percent of viewport width (vw) and viewport height(vh)

NOTICE:

background-size: contain;

will scale up or down your image as much as is necessary to make sure all of your image is visible within the parent(it maintains aspect-ration in the meanwhile)

so it's possible that some places of your body element end up white and does not get the background (if your image's aspect-ratio is different from body's aspect-ratio)

if you want all your body html to be covered with your image you should use

background-size:cover

instead of contain
this can crop your image as you mentioned...

so you need to make a choice
if your image's aspect-ratio is more important than integrity of your image, cover is the solution
otherwise (integrity matters more than aspect-ratio) you can use 100% for background-size
if both integrity and aspect-ratio are important and it's ok that some part of body loads up white and without background-image, you've made best choice by using contain