JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="page-bkg">
    <img src="http://media.smashingmagazine.com/cdn_noupe/img/wallpaper-3.jpg" alt="some bkg" />
    
    <div id="content">
    This content is relative to the image!   
    </div>
    <div id="moreContent">
        This is awesome!
    </div>
    <div id="moreContent1">
        RELATIVITY!
    </div>

</div>

CSS

#page-bkg img {
    position:fixed; width:100%; height:100%; top:0; left:0;
    z-index:0;
}
#content {
    z-index:1;
    color:white;
    position:absolute;
    top:10px;
    left:10px;
}
#moreContent {
    z-index:1;
    color:yellow;
    font-weight:bold;
    position:absolute;
    bottom:0px;
    right:0;
}
#moreContent1 {
    font-weight:bold;
    font-size:1.4em;
    position:absolute;
    top:50%;
    left:50%;    
    color:white;
}