Jquery: Body background scrolling to the left?

Question

I'm breaking my head trying to make this work. I want my page's body background to scroll sideways.

<html>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(function(){
    $("body").animate({backgroundPosition : "500 0"}, 2000);
});
</script>

<body style="background-image: url('bg.jpg')">

</body>

</html>

http://stackoverflow.com/questions/4077429/jquery-css-background-position-animation — RTulley, Mar 21 '12 at 21:25

score 1 · Answer 1 · answered Mar 21 '12 at 21:25

1

jQuery cannot animate css properties that takes 2 or more values.

You can use backgroundPositionY and backgroundPositionX to animate vertically and horizontally:

$("body").animate({backgroundPositionY : "500px"}, 2000);

DEMO

answered Mar 21 '12 at 21:25

Didier Ghys

30,396
9
75
81

It works also in Safari and Chrome. Only Opera and Firefox have no support. – Sven Bieder Mar 21 '12 at 21:31

score 1 · Answer 2 · answered Mar 21 '12 at 23:05

In order to create this effect in all browsers, you can try a different approach like this;

HTML

<body>
  <div class="background" id="background"></div>
  <div class="page-content">Put your content here</div>
</body>

CSS

.background {
  background-image:url('bg.jpg');
  position:absolute;
  z-index:1;
}
.page-content {
  z-index:2;
  position:relative;
}

jQuery

$(document).ready(function(){
  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  var animateWidth = '500'        
  $('#background').height(windowHeight).width(windowWidth)
    .animate({
      left: animateWidth + 'px',
      width: (windowWidth - animateWidth) + 'px'
    }, 2000);
});

Here is a working example: http://jsfiddle.net/HHgKW/3/

Jquery: Body background scrolling to the left?

2 Answers2