jQuery css background-position animation

Question

I've got a strange problem with jQuery and CSS; it seems a jQuery bug; I've tried to search around but infos are ugly.
There's a large photo as background of the body; when I click on a button I wish to obtain a simple jQuery animation of the background, from "bottom" position to "50%" position.
Well, if I set $("body").css("background-position", "center 50%"); it works but if I try tu use animate() jQuery function it doesn't works anymore.
So is it possible to have this effect in some way?
Thank you so much in advance.

Answer 1

I'm trying to recreate the issue, but Pekka is on to something... using jQuery you could calculate the current height of the window, halve it, and set the background position using that pixel value.

Answer 2

I would suggest using a div that contains the image (or has the image as a background) and the. Animating that div. Start with a minimal case where you just have 1 div, absolutely positioned, and an img inside the div. Then add you other elements on top of it (higher z-index) and achieve the desired look and behavior.

Answer 3

I'm pretty sure it's not possible to use animate() for relative values, because it's not easily possible to calculate absolute positions from the relative information.

Try using pixel values all the way.