JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-fixed">
    <div class="header-bg1"></div><!-- 
    --><div class="header-logo"></div><!--
    --><div class="header-bg2"></div>
</div>

CSS

body {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #D3BC00 0%, #A49200 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #D3BC00 0%, #A49200 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #D3BC00 0%, #A49200 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D3BC00), color-stop(1, #A49200));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #D3BC00 0%, #A49200 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #D3BC00 0%, #A49200 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}
.header-fixed {
    position: fixed;
    top: 0;
    width: 100%;
}
.header-bg1 {
    background:url('http://i.imgur.com/tZR9xWD.png') repeat-x;
    height: 88px;
}
.header-bg2 {
    background:url('http://i.imgur.com/GkQQ4PF.png') repeat-x;
    height: 128px;
}
.header-logo {
    background:url('http://i.imgur.com/m3EiiKN.png') no-repeat;
    width: 469px;
    height: 128px;
}
.header-fixed>div {
    display:inline-block;
    vertical-align: top;
}

.header-bg1, .header-bg2{
    width: calc((100% - 469px)/2);
}