как сделать так, чтобы мое анимированное изображение покрывало весь фон?

Question

У меня есть изображение, которое я использую в качестве фона, которое анимировано в CSS, но это все мои материалы в нижней части страницы с простым белым фоном. Кто-нибудь знает, как я могу заставить его воспроизводить больше анимированных обоев, чтобы мой контент не продавливался?

#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

Переместить анимацию в фоновую позицию. Таким образом, он будет оживлять позади того, что находится на нем. В этом случае я перенес фон в тело, но вы также можете использовать абсолютное / относительное положение.

Анимируя поле, вы получаете sh все в один сторона, а не только фон.

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%;
  }
}

Рабочий пример: https://jsbin.com/ruyemijasi/edit?html, css, js, вывод