Background size cover is not working - html

Question

My PNG picture size is 1000px by 1000px.
I use it as a background image in a DIV which has a height of 550px and a background-size: cover property.
My issue is that this background-size cover does not seem to be working. My picture is not scaled down to the size of the DIV. What is the issue?

Answer 1

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' />
You can use background-size: 100% 100%, it will make the image fill the entire height and width of the container but it will not preserve/maintain the aspect ratio of the image.
Alternately, you could make use of background-size: contain, it would preserve the aspect ratio but it will leave white space on the left and right if the width is larger (or) on the top and bottom if the height is larger.
Demo with width being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Demo with height being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
max-width: 450px;
/* just for demo */
border: 1px solid;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />

Answer 2

Use background-size 100% 100% instead, should solve the issue.