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

Question

[Kizzeon]

Мне необходимо задать несколько 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;
    }

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

Comments

[Lord_Dantes]

Выливайте код на codepen.io

[Alams Stoyne]

position: absolute у body::before, body::after

[Kizzeon]

s l a v e, Сейчас скину
Alams Stoyne, Тогда он не будет повторятся, в зависимости от размера body. На 1 устройстве оно повторяется 5 раз, на 2 3 раза и т.д.
Мне нужно настроить что бы оно повторялось автоматически и нужное количество раз

Answer 1

[Марат Нагаев]

Вот здесь рассказано про множественные фоны в css.

Comments

[Kizzeon]

Тогда отдельный бэкграунд нельзя с анимировать с помощью css(или я не знаю как его с анимировать)

[Ankhena]

Kizzeon, тогда нужно дописать это в вопрос. И туда же добавить ссылку на codepen или jsfiddle, чтобы можно было пощупать ваш код.

[Kizzeon]

Ankhena, Уже нет смысла, я просто объеденил изображение в svg и всё решилось