Move multiple backgrounds infinitely using CSS - css

Question

I have two backgrounds:
body {
background-image: url(img/nemo.png),url(img/ocean.png);
}
How do I make nemo.png background move infinitely from left-right but not affecting ocean.png background?
EDIT: When he reaches the right most edge (and the image is no longer visible), he will appear from the left edge again and start doing the drifting from left-to-right.

Answer 1

This can be done with pure CSS 3, e.g keyframed animations:
Demo: http://jsfiddle.net/dghsV/112
body {
background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
background-repeat: no-repeat;
background-position: 50% 0%, 0;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
animation: swim 2s linear 0s infinite;
}
#-moz-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
Syntax
animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
The feature is experimental, so vendor-prefixes (eg -webkit-) have to be added (see also Can I use CSS3 Animation for compatibility notes). In my demo, I've used all properties, except for the last one.

Answer 2

Heres an option:
Create an animated GIF from the nemo.png which is a simple animation of the image moving from left to right.
Then create the layered backgrounds by setting ocean.png to the background of the body of your page.
Then create a div which with the following css:
width:100%;
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);
The div will be an all-encompassing container for all of your content which will give you a layered background effect.

Answer 3

make only ocean the background and create a div with the nemo as background:
<div id="nemo"></div>
#nemo {
background: url(nemo.png) no-repeat;
width: 100px;
height: 100px;
position:absolute;
left: 0px;
top: 500px;
z-index:-10;
}
than you can animate this div with javascript (jQuery):
<script type="text/javascript">
$(document).ready(function() {
SwimRight();
});
//duration is in ms
function SwimRight() {
$('#nemo').css({positionLeft: 0});
$('#nemo').animate(
{ left: $(document).width() },
{ duration: 5000,
easing: normal,
queue: true,
complete: SwimRight}
);
</script>