Support 'Background-Size' Property on Older Browsers

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 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

background-size:cover not working in android native browser

After searching about this problem and finding no solution, I deleted background-image from CSS file styles and used an inline style in HTML codes. The problem with android native browser is solved.

I updated the fiddle and it's working in android native browser.

The Updated Fiddle

it seems that android also has problem with parsing background format like this :

background: url('...') fixed center center / cover;

and we should separate the background-image form others and use it inline, and then use each option separately in css file, like this :

background-size: cover;
background-position: center center;

Method to check for css background-size support

if( 'backgroundSize' in document.documentElement.style) would be the easiest way to go about it.

CSS background-size property

What the other answers are proposing only works if your body element is as big as the window.

If the body size is not the full window size, you could try using JavaScript (I'm using the jQuery framework):

<script>
$(document).ready(function() {
    // Call the function at the beginning, in case the window is already too small, 
    onResize();

    $(window).resize(function() {
        onResize();
    });

    function onResize() {
        // Note: 16 / 9 is the resolution of the background image
        // Change appropriately
        if ($(window).width() / $(window).height() < 16 / 9) {
            $(".bg").css("background-size", "auto " + $(window).height() + "px");
        }
        else {
            $(".bg").css("background-size", "cover");
        }
    }
});
</script>

See this JFiddle

Hope this helps!

Make a picture/background scale based on width of the browser

Use background-size:cover, as they did:

body {
    background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
    background-position: center top;
    background-size: cover;
}

EXAMPLE HERE

I'd also suggest taking a look at this recent SO answer of mine, which demonstrates how to get the height of the rendered background image, and scale the background accordingly:

Getting the height of a background image resized using "background-size: contain"

JS:

var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");

$(window).on("resize", function () {
    $('body').height($('body').width() * img.height / img.width);
}).resize();

I can't add a CSS background-size value to background property's value

Also what hasn't been noted yet is that not all browsers (including Chrome) supports the new CSS3 shorthand for background.

For better support you probably should just use the background-size property separately as most new browsers support it that way.

div {
    width: 500px;
    height: 400px;
    background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat scroll 50% 50%;
    background-size: cover;
}

The code above works in both FireFox and Chrome while the shorthand does not.

For a demo and proper attribute ordering see the link below.

See Dev - Opera - Background Shorthand

Can I implement a CSS-only fallback for background-size?

A CSS-only fallback for background-size is tricky, but yes it can be done.

The trick is to use the short-form background style to set the various background properties, rather than using the individual styles like background-size, background-image, etc.

So in your case, you would have something like this:

background: url(img2x.jpg) 0% 0%/100%;

(The 0% 0% is for background-position (0% 0% is default) which is required before the background-size value when using the short-form style).

So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size will throw away the whole line, rather than just throwing away the background-size on its own.

This means that we can specify an entirely different set of background values for older browsers.

background: url(ie8bg.jpg);   /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%;  /* shown by new browsers with background-size support*/

You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.

Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.

So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size.

Hope that helps.

[EDIT]

Browser compatibility may be a minor issue here. Some browsers may support background-size but not support it as part of the background short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size.

This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.

In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.

In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.

---

Related Topics