RESOLVED: Fade in effect causing background image not to fill screen

The code in this state.

https://jsfiddle.net/6x2vsLbq/

Both backgrounds fill the entire area.

.containera,
.containerb {
  animation: fadeBody 5s ease 0s forwards;
}

.containerb {
  display: flex;
  flex: 1 0 0%;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

As soon as these are added to it:

https://jsfiddle.net/nf4wg7ma/

The purple background is able to be visible.

How would this be fixed so that the purple body background can never be able to be seen when one of the covers is clicked on.

document.querySelector('html').classList.add('bodyfadea');
document.querySelector('html').classList.add('bodyfadeb');

.containera,
.containerb {
  animation: fadeBody 5s ease 0s forwards;
}
.containerb{
 display: flex;
 flex: 1 0 0%;
}

 .bodyfadea,
 .bodyfadeb  {
  background: #353198;
}

.bodyfadea body,
.bodyfadeb body{
  animation: fadeBody 5s ease forwards;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Fixed: Added this
https://jsfiddle.net/Lpf620d5/1/

.bodyfadea body:before,
  .bodyfadeb body:before{
    content:"";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: inherit;
  }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.