How do i rollup background image of body?-CodePudding

body {
  background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
  animation: backdrop_roll linear 100s infinite;
}


/* .sky {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 100%;
        opacity: 1;
        background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
        animation: backdrop_roll linear 100s infinite;
} */

.enemy-animation {
  position: relative;
  z-index: 1;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}

#ship {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 90%;
  left: 50%;
  margin-left: -50px;
  background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png');
  z-index: 1;
}

@keyframes oscillate {
  from {
    left: 0%;
  }
  to {
    left: calc(100% - 200px);
  }
}

@keyframes backdrop_roll {}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src="game.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Shooting Game</title>
</head>

<body>
  <div ></div>
  <img  src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship">
  <div id="ship"></div>
</body>

</html>

I want to move the backround sky image such it feels like the ship is moving, using key frame animation. I was able to move it by using keyframe animation on div by changing the css top property but it doesnt work on body. @keyframes backdrop_roll { from { top: -630px; } to { top: 0; } } the above line works if it was a div, any way to move the background will work.

CodePudding user response：

You'll want to target the background-position instead of a translate because translate will apply to body as a container of your children. See example below, adjust the animation duration speed according to how fast visually you want the ship to appear to be going. Cheers.

body {
    background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
    animation: backdrop_roll linear 15s infinite;
    background-position: bottom center;
}

/* .sky {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 100%;
        opacity: 1;
        background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
        animation: backdrop_roll linear 100s infinite;
} */

.enemy-animation { 
    position: relative;
    z-index: 1;
    animation-direction: alternate;
    animation-duration: 3s;
    animation-name: oscillate;
    animation-iteration-count: infinite;
  }

  #ship {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 90%;
    left: 50%;
    margin-left: -50px;
    background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png') ;
    z-index: 1;
}

  @keyframes oscillate {
    from {
      left: 0%;
    }
    
    to {
      left: calc(100% - 200px);
    }
  }

  @keyframes backdrop_roll { 
     to {
      background-position: center top;
     }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src="game.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Shooting Game</title>
</head>
<body>
    <div ></div>
    <img  src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship">
    <div id="ship"></div>
</body>
</html>