How to set 2 different backgrounds, one before, one after fade

[asasass]

https://jsfiddle.net/3xr1epwd/

If I would want to have one curtain background for where the curtain is open.

And an entirely separate background for when the curtain opens, how would I do that?

If I wanted to remove everything inside and have a plain background for when the curtain is 1st viewable.

And then when the curtain opens from clicking on the button, put everything back inside it.

How would that be done?

Only occurring with .curtain1

By background I mean, the fan, fence, cross. that whole area.

One background before the fade.

A different background after the fade in of the image.

A new background would appear when slide is used.

[PaulOB]

If I understand correctly you can apply a background to the :after element of the ratio-keeper to hide the fan like this.

.ratio-keeper:after{
  content:"";
  background:red;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  opacity:1;
  pointer-events:none;
  animation:fadeOutStart 1s linear 5s forwards;
}

@keyframes fadeOutStart {
  to {
    opacity: 0;
  }
}