Detect Support for Background-Size: Cover

Background-size: cover not working in any browser

Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:

[cover] 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.

(“When the image and container have different dimensions” should rather be “have different aspect ratios” – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)

If you want the image to get “squished” instead of clipped – then use background-size: 100% 100%.

Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.

background-size: 100% 100% means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.

cover however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.

Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens “on the sides” of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.

That analogy make things clearer …?

Background Size Cover not working

You must set div img rather than just div. Give the element a height and width of 100% and it should cover the viewport.

div img {
   position: fixed;
    top: 20px;
    z-index: -1;
    opacity: .5;
    background-size: cover;
    height: 100%;
    width: 100%
}

How to get the current, real, background image size, when background-size is cover?

I found the solution by myself. Here is a nice jsfiddle visualization, where we calculate the container size and the actual background image size separately.

You can resize the image container (red border) by dragging it from the bottom right corner and see how the container size changes separately from the actual background size: https://jsfiddle.net/ahvonenj/o76k5jbx/

$(document).ready(function()
{
    var fullhdWidth = 1920;
    var fullhdHeight = 1080;
    var fullhdRatio = fullhdWidth / fullhdHeight; // About 1.7

    $('#wrapper').resize(function()
    {
        var containerWidth = $(this).width();
        var containerHeight = $(this).height();
        var containerRatio = containerWidth / containerHeight;
        var realWidth = null;
        var realHeight = null;

        console.log(containerWidth, containerHeight, containerRatio);

        if(containerRatio > fullhdRatio)
        {
            realWidth = containerWidth;
            realHeight = containerWidth/fullhdRatio;
        }
        else
        {
            realWidth = containerHeight*fullhdRatio;
            realHeight = containerHeight;
        }   
    });
});

Note: I am using this small library to detect size changes on the container div element, as jQuery's resize handler can only be bound to window object.

background-size: cover not working correctly.

Use

html, 
body {
  height: 100%;
}

The body does not cover the rest of your page.

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

---

Related Topics