JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left" class="bgImage flip"></div>
<div id="right" class="bgImage flip"></div>

CSS

body, .bgImage {
    background-image: url('http://flickholdr.com/640/1280/5');
}

.flip {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

body {
 background-position: top center;     
}

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 320px; /* image width / 2 */
    background-position:top left;    
}


#right {
    position:absolute;
    left:49.99%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 320px; /* Image width / 2 */
    background-position:top right;
}