1

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.

Rob W
  • 341,306
  • 83
  • 791
  • 678
Jürgen Paul
  • 14,299
  • 26
  • 93
  • 133
  • 1
    You mean nemo swims back and forth? – mrtsherman Apr 11 '12 at 14:06
  • Can you define what you mean by infinitely? When he gets to the right, does he appear from the left again, does he turn around and go back to the left? – Rory McCrossan Apr 11 '12 at 14:12
  • I mean when it reaches the right most part, it appears on the left again. He doesn't turn back and go back. – Jürgen Paul Apr 11 '12 at 14:26
  • 1
    So are you having problems moving nemo from left to right and then back again - or are you having problems moving _only_ nemo (since you're using multiple background images on the same element). If it's the latter, I think it would be easier to place the ocean on the html element and only have nemo on the body element. Then you could easily animate the body element's background position using jQuery. – powerbuoy Apr 11 '12 at 14:33

3 Answers3

10

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.

Rob W
  • 341,306
  • 83
  • 791
  • 678
0

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.

Khan
  • 17,904
  • 5
  • 47
  • 59
0

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>
WolvDev
  • 3,182
  • 1
  • 17
  • 32