如何让我的动画图像覆盖所有背景？

Question

I've got a an image I'm using as a background that is animated in CSS, but it is push all of my content to the bottom of the page with plain white background. Does anyone know how I can get it to act more of an animated wallpaper so my content isn't pushed down?

 #map { height: 400px; width: 400px; margin: 0 auto; } .check { text-align: center; } h3, h2, h1, a { text-align: center; background-color: transparent; } #sky { overflow: hidden; } #clouds { width: 200%; height: 1000px; background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80'); -webkit-animation: movingclouds 25s linear infinite; -moz-animation: movingclouds 25s linear infinite; -o-animation: movingclouds 25s linear infinite; } @keyframes movingclouds { 0% { margin-left: 0%; } 100% { margin-left: -100%; } }

 <div id="sky"> <div id="clouds"></div> </div>

Answer 1

Move the animation to the background position. This way, it will animate behind whatever is on top of it. In this case, I've moved the background to the body, but you can use absolute/relative position as well.

By animating the margin, you push everything to one side, not just the background.

body {

  background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
  -webkit-animation: movingclouds 25s linear infinite;
  -moz-animation: movingclouds 25s linear infinite;
  -o-animation: movingclouds 25s linear infinite;
}

@keyframes movingclouds {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -100%;
  }
}

Working example: https://jsbin.com/ruyemijasi/edit?html,css,js,output