iPad Working on an animated iPad3 lockscreen - need help!

[jeemer]

As the title says, I'm working on a lockscreen for the iPad 3. It's going to be two layers: a background layer and then a logo bobbing up and down above it using css3.

As I understand, iPad wallpapers have to be set to 2048x2048 in order to fill the screen in both landscape and portrait mode. Due to this I've set the body of LockBackground.html to 2048 x 2048 px. It works fine in Chrome on the pc.

Main issue: When I add it to winterboard and activate it, it looks like it's stretched to all hell and it's only showing less than 1/4 of what it should be.

This is what it should look like:

http://i.imgur.com/HipQ3.jpg

This is what it looks like on screen:

http://i.imgur.com/vmC7f.jpg

Although I can only see the corner of the logo, I can see it bobbing. It's definitely animating, just not filling the screen as it should. Any ideas?

Side point: It also looks all glitched to hell for a second after respringing, but then the lockscreen appears as normal. The glitchy screen appears for a split second after I respring, but not if I just lock/unlock. Is this just an issue with compatibility right now with the iPad 3 and winterboard?

 

[jeemer]

Ok - got an update

By halving the image and div sizes, it now fits the screen for the most part. (Don't get why this should be since it's 2048x2048 and not 1024x1024?)

However, there's a new problem. Although it looks pretty much fine in landscape, when I rotate to portrait the logo goes off-screen on one side.

I understand that on an iDevice you're moving the page around within a viewport (right?) and therefore my css is only centering the image within the parent div.

Is there a way to truly center a div on the ipad screen so that it's fluid between both portrait and landscape mode? Using css or maybe js?