CODEWITHSUNDEEP
htmlcssbackgroundsizecover
user2440477
user2440477

Reputation: 91

Is there an alternative to background-size:cover?

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.

Upvotes: 2

Views: 3941

Answers (2)

addcn
addcn

Reputation: 21

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

Upvotes: 2

zey
zey

Reputation: 6103

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 !

Upvotes: 0

Related Questions