I am currently viewing a background image of my website while moving with the mouse with 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 great with a large background (2000 pixels wide, for example). Is there a way to do the same, but with
background-size: cover;
? At first glance, this will not and should not work explicitly, since the background image is always the same size as the browser, and therefore cannot be launched. Since browser windows are never exactly the maximum height (reason for the bookmarks bar, etc.), it works with vertical movement. Is it possible to have a βcover backgroundβ but resize the background image to some pixels, so that it is slightly larger than the viewport, but also automatically resize?
source share