JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
    <div class="box"></div>
</div>

CSS

body {
    overflow-x: hidden;
}
.box {
    height: 1300px;
    background-color: rgba(189, 228, 182, 0.5);
}
body .container {
    position: relative;
}
body > .container:before, body > .container:after {
    position: absolute;
    display: block;
    content:"";
    background: #D345CC;
    width: 312px;
    top: 0;
    bottom: 0;
    background-image: url(http://dev.webparadox.com/s.kalinin/rivera/images/1/bg_main_1.jpg);
    background-repeat: no-repeat;
    z-index: -1;
}
body > .container:before {
    left: 0;
    background-position: 0 0;
}
body > .container:after {
    right: 0;
    background-position: 100% 0;
}
@media screen and (min-width: 768px) {
    body > .container:before {
        left: auto;
        /* right: 100%; */
        right: calc(100% - 15px);
        background-position: 0 0;
    }
    body > .container:after {
        right: auto;
        /* left: 100%; */
        left: calc(100% - 15px);
        background-position: 100% 0;
    }
}