Is there an alternative to background-size:cover?

Question

When using Chrome in particular, it creates a significant scrolling lag and also affects animations on the page and makes them stutter really badly.

So is there an alternative to background-size:cover? I have tried a couple things including the plugin jQuery backstretch but it actually created just as much lag as background-size:cover.

Beitch

Thank you, I'll check them out... it says "deprecated" though. There is another one it links to however... – Beitch

Doesn't seem to be an alternative, just a compensator for IE users. – Beitch

louisremi.github.io/jquery.backgroundSize.js/demo – Agar

How about making background pictures in multiple sizes, and selecting one of those based on the window size (with a media query) so the browser doesn't have to stretch. – Strafe

Answer 1

I searched for this forever, and I finally figured this out. It's only a solution for mobile, however. (Sorry for reviving an old post):

/* portrait */
@media screen and (orientation:portrait) {
    .box{
    /* portrait-specific styles */
    background-size: auto 100%;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
   .box{
    /* landscape-specific styles */
    background-size: 100% auto;
    }
}

(This is written for images that are wider than they are long. To switch it, flip the 100% and the auto.)There are two parts to it. The first part involves @media screen and (orientation:landscapeorportait). This displays different images based on different screen orientations. The second part is more interesting: 100% width or length fills the image based on width or length, and auto just makes sure the image is properly scaled. So, if your image is longer than it is wide, on portrait mode it will fill up on the longer side, thus having the cover effect (and vice versa).

Capwell

Answer 2

Try it ,

   background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   -webkit-background-size:cover;

or you can try with javascript ,

function actualizar_fondo(imagen){
    $('body').css({"background":"url(img/"+imagen+".jpg) no-repeat center center fixed"});
    $('body').css({"-webkit-background-size":"cover"});
    $('body').css({"-moz-background-size":"cover"});
    $('body').css({"-o-background-size":"cover"});
    $('body').css({"background-size":"cover"});
                                 }

Or you can go to this link as falguni said . Here is documentation !

Fabe