How to smooth the moving of background image?

Question

I've managed to create a moving/panning background image. It looks and works fine in jsfiddle:

But when I test it in my browser, the moving is not smooth and the photo freezes at times.

This is the HTML:

<div id="pageBg">
</div>

This is the CSS:

#pageBg {
    background: url('http://enos.itcollege.ee/~rselis/bg_front.jpg') no-repeat 0 0 scroll;    
    height: auto;
    left: 0;
    min-height: 900px;
    overflow: hidden;
    position: fixed;   
    top: 0;
    width: 100%;
    height: 100%;
}

and the jQuery bit:

$(document).ready(function(){
   $('#pageBg').mousemove(function(e){
      var mousePosX = (e.pageX/$(window).width())*100;
      $('#pageBg').css('background-position-x', mousePosX +'%');

       var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');
   }); 
});

What causes this and how can I fix that? Thank you in advance.

Ok, that's weird cause it freezes in my Chrome browser. I should test it on other devices then. Is there a way to make it work in Mozilla and IE as well? — bijoume, Oct 30 '13 at 16:12
Thank you Bharath and Szymon. Can you tell why the image is not moving in Mozilla at all? Is there some kind of script I need to add in order for it to work in all the browsers? — bijoume, Oct 30 '13 at 16:26
I think it's not working because mozilla and IE does not recognize background-position-x and y. Im trying to do this — Szymon, Oct 30 '13 at 16:28

Szymon · Accepted Answer · 2013-10-30T17:32:29.897

1

It works now on firefox and ie but on firefox it is too sensitive but background-position is now good

            $('#pageBg').mousemove(function(e){
                var mousePosX = (e.pageX/$(document).width())*100;
                var mousePosY = (e.pageY/$(document).height())*100;

                $('#pageBg').css({
                    'background-position': mousePosX +'%' + mousePosY +'%'
                });

            });

EDITED: You have to change window => document/width/height . Firefox counted not right mousePositions as other browsers do. So there's to way to fix it or leave (window) and detect browser (firefox) and then

var mousePosY = (e.pageY/$(document).height()); //without 100

Or change (window) for (document) and it works on Chrome, Opera, Firefox, IE, Maxthon and Safari. Smooth as it should for me.

edited Oct 30 '13 at 17:32

answered Oct 30 '13 at 16:36

Szymon

1,281
1
20
36

Thank you so much. Is there a way to deal with this sensitivity thing? – bijoume Oct 30 '13 at 16:41
No problem I'm glad I could help, now I'm looking whats wrong with FF – Szymon Oct 30 '13 at 16:46
I think we're talking about the same thing. I mentioned it in my original post. The moving is not smooth and sometimes the image freezes. And now I see that the sensitivity issue is a problem in all browsers. I uploaded the test page here if this is any help for you: [link]http://wv.webweaver.ee/ – bijoume Oct 30 '13 at 16:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40269/discussion-between-szymon-dziewonski-and-juhan-teppan) – Szymon Oct 30 '13 at 17:48
I see you have problem when move in on text (in your website) background does not move, change your $('#pageBg').mousemove to $(document).mousemove – Szymon Oct 30 '13 at 17:56

How to smooth the moving of background image?

1 Answers1