Geek Answers Handbook

Is there an alternative to background size: cover?

When using Chrome, in particular, it creates a significant scrolling delay, and also affects the animation on the page and makes them stutter very badly.

So, is there an alternative to background size: cover? I tried a couple of things, including the jQuery backstretch plugin, but actually created as many lags as the background size: the cover.

0
source share
2 answers

I was looking for it forever, and I finally figured it out. However, this is only a solution for mobile devices. (Sorry to restore the 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 100% and auto .) There are two parts. The first part includes @media screen and (orientation:landscape or portait) . It displays different images based on different screen orientations. The second part is more interesting: 100% width or length fills the image in width or length, and automatically just makes the image correctly scaled. Thus, if your image is longer than it is wide, in portrait mode it is filled with a longer side, thereby having a cover effect (and vice versa).

+1
source

Try

  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. There is documentation here!

0
source

More articles:


All Articles