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 3 div's with transparent images over the optional wallpaper.</h1>
</div>
CSS
body{
background-image:url("http://files.customize.org/thumbnails/larger/10302.jpg");
background-repeat: no-repeat;
}
.top{
background-image:url("http://placehold.it/643x12/00ff00");
background-repeat: no-repeat;
width: 643px;
height: 12px;
}
.middle{
background-image:url("http://files.softicons.com/download/application-icons/free-developer-icons-by-designkode/png/32/flag-green.png");
background-repeat:repeat-y;
position:fixed;
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;
text-shadow: 1px 1px 1px #000, 3px 3px 5px green; /* Radioactive Green Shadow */
}