Getting 1 image to appear instead of 2 - html

Question

How would I be able to implement that?
Half an image on each side
Where 1 image fills both left and right panels.
I want one image to show as 1 whole image, then the transition effect to split it into 2 images.
code: https://jsfiddle.net/kqLpv21h/
.panel-left,
.paneldoor-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
background-image: url("https://picsum.photos/600");
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
}
.panel-left {
left: 0%;
background-color: rgb(91, 96, 106);
}
.panel-right {
left: 50%;
background-color: rgb(229, 211, 211);
}
.curtain.slide .panel-left {
left: -50%;
}
.curtain.slide .panel-right {
left: 100%;
}
<div class="panel-left"> </div>
<div class="panel-right"> </div>
Currently the image fills in both the left and right side.
I want only one image to appear, that fills in both sides.

Answer 1

.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
background-image: url("https://picsum.photos/600");
- background-size: 100%;
+ background-size: 100vw;
background-repeat: no-repeat;
background-position: top;
}
.panel-left {
left: 0%;
background-color: rgb(91, 96, 106);
+ background-position: left;
}
.panel-right {
left: 50%;
background-color: rgb(229, 211, 211);
+ background-position: right;
}
This will make the Image seem like one. You might have to adjust some tiny things to fit your needs, but that's generally it.