Move multiple backgrounds infinitely using 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

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 2

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 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>