Как проложить несколько изображений в background, что бы они повторялись всю высоту body?

Мне необходимо задать несколько background для body, что бы они повторялись на всю высоту страницы. Но ::before и ::after либо сталкивают весь контент вниз, либо не расширяются на всю высоту(при position: absolute они лежат под элементами, но не могут расширятся от родителя)

Вот мой код:

body{
  overflow-x: hidden;
  width: 100vw;
  height: 100%;
  background: url('изображение');
}
body::before, body::after{
  content: "";
  width: 110vw;
  height: 100vh;
  background-size: cover;
}
body::before{
  background: url('изображение1');
  animation: paralax 5s linear infinite;
}
body::after{
  background: url('изображение2');
  animation: paralaxy 20s linear infinite;
}

При котором бэкграунд сталкивает весь остальной контент вниз. Как можно сделать что бы он продолжил скейлиться от родителя, но не сталкивал вниз весь контент?