简体   繁体   中英

Background image panning with background-size: cover?

I'm currently panning the background image of my website when moving with the mouse with following code

$('body').mousemove(function(e){
    var mousePosX = 50 + (e.pageX/$(window).width())*25;
    var mousePosY = 50 + (e.pageY/$(window).height())*25;
    $('body').css('backgroundPosition', mousePosX + '% ' +  mousePosY + '%');
});

This works perfectly with a larger background image (2000px in width eg). Is there a way to do the same but with

background-size: cover;

? At first glance it won't and shouldn't work obviously, since the background image always is the same size as the browser and therefore can't be panned. Since the browser windows never exactly is the maximum height (cause of bookmark toolbar etc) it works with a vertical movement though. Is it possible to have a "cover background" but resize the background image some pixels as well so it is slightly larger than the viewport but also resizes automatically?

body{
    background:url(IMAGE);
    background-size: 110%;
    background-position: -10px -10px;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM