JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg1" class="bg">top</div>
<div id="content">help me. seriously.</div>
<div id="bg2" class="bg">bottom</div>

CSS

html, body {
    width:100%;
    height:100%;
}

body { display: table; }

div { display: table-row; }

.bg {
    width:315px;
    height:23px;
    margin:0 auto;
}

#content {
    width:450px; 
    margin:0 auto;
    text-align: center;
    background-color: blue;
    color: white;
    height: 100%;
}


#bg1 {background:url(http://placehold.it/200x300) 0 50% no-repeat;}
#bg2 {background:url(http://placehold.it/200x300) 0 50% no-repeat;}