JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>

CSS

.header {
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url('http://i.stack.imgur.com/EvTUE.png');
    background-position: center;
    background-repeat: no-repeat;
}
.header:before,
.header:after {
    content:"";
    display: block;
    position: absolute;
    top: 0px;
    height: 300px;
    width: calc((100% - 600px) / 2);
}
.header:before {
    left: calc((100% - 600px) / 2 - (100% - 600px) / 2);
    background-image: url('http://i.stack.imgur.com/Y0evs.png');
}
.header:after {
    right: calc((100% - 600px) / 2 - (100% - 600px) / 2);
    background-image: url('http://i.stack.imgur.com/oUYM2.png');
}