2 сложенных div с фоновыми градиентами, не отображаются должным образом

Question

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

html:

<div class="bg bg-base">
  <div id="bg-animation" class="bg bg-animation">
    <div class="layer-content">
       <!--content here-->
    </div>
  </div>
</div>

CSS:

.bg {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: absolute;
}

.bg-base {
  background-image: linear-gradient(to left bottom, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}

.bg-animation {
  background-image: linear-gradient(to right top, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}

.layer-content {
  width: 100%;
  position: relative;
}

Я делаю некоторые анимации непрозрачности с верхним градиентом, поэтому мне нужно 2 из них поверхдруг с другом. но если, скажем, я установил непрозрачность верхнего градиента на 0, то нижнего нет. если я добавлю height: 5000px; к базе bg, она появится.

Answer 1

Убить абсолютное позиционирование:

https://jsfiddle.net/cathead/1nbjdp05/4/

.bg {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  xposition: absolute;
  width: 100%;
}