Background won't shift

Question

My code doesn't seem to be firing, for some odd reason, I have no idea why. Mouse movement is supposed to cause the background to shift, but nothing happens.

<html>

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

</html>

<style>
#pageBg {
background: url(http://****.com/tes.jpg) no-repeat 0 0      
scroll;    
height: auto;
left: 0;
min-height: 1920px;
min-width: 1080px;
overflow: hidden;
position: fixed;   
top: 0;
width: 100%;
}

</style>

<script>

$(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 +'%');
}); 
});

</script>

score 2 · Accepted Answer · answered Sep 12 '15 at 21:54

When you write the code in the correct order and include jQuery, all seems to be well:

$(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 + '%');
  });
});

#pageBg {
  background: url(http://www.europeantouchskincare.com/tes.jpg) no-repeat 0 0 scroll;
  height: auto;
  left: 0;
  min-height: 1920px;
  min-width: 1080px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageBg">
</div>

So your final code will be:

<html>
    <head>
        <style>
        #pageBg {
            background: url(http://www.europeantouchskincare.com/tes.jpg) no-repeat 0 0      
            scroll;    
            height: auto;
            left: 0;
            min-height: 1920px;
            min-width: 1080px;
            overflow: hidden;
            position: fixed;   
            top: 0;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(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 +'%');
                }); 
            });
        </script>
        <div id="pageBg">
        </div>
    </body>
</html>

That's what I'd call a derp. I feel fairly dumb right now, thanks. — Eric ERK, Sep 12 '15 at 21:55

Background won't shift

1 Answers1