JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">

    <div id="left"></div>
    <div id="center">asdf asdf </div>
    <div id="right"></div>

</div>

CSS

#banner { position: relative; }

#banner DIV {
    height: 200px;
}

#center {
    width: 400px;
    background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    opacity: .5;
}

#left, #right { width: 50%; float: left; }

#left {
    background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left);
    background-position: -200px 0px;
    background-repeat: repeat-x;
}

#right {
    background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right);
    background-position: 200px 0px;
    background-repeat: repeat-x;
}