JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
<div id="someContent">
<h1>This example shows how to use<br />
3 div's with transparent images<br />
over the optional wallpaper.</h1>
</div>
CSS
.top{
background-image:url("http://placehold.it/643x12/00ff00");
background-repeat: no-repeat;
width: 643px;
height: 12px;
}
.middle{
background-image:url("http://www.housedecorexclusive.co.uk/ekmps/shops/housedecorltd2/images/scion-tree-circles-wallpaper-indigo-linen-110254-15979-p.jpg");
background-repeat:repeat-y;
position:fixed;
z-index: -1;
width: 643px;
height: 100%;
}
.bottom{
background-image:url("http://placehold.it/643x12/0000ff");
background-repeat: no-repeat;
position: absolute;
bottom: 0px;
width: 643px;
height: 12px;
}
#someContent{
margin-left: 50px;
background-color: silver;
width: 543px;
text-shadow: 1px 1px 1px #000, 3px 3px 5px green; /* Radioactive Green Shadow */
}