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 alter
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:landscape
orportait)
. 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).
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 !