JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    main div
    <br><br><br>
    <div class="inner">
        responsive
    </div>
    <div class="fixedpos">
        fixed pos
    </div>    
</div>

CSS

.main {
   padding:50px 0; 
   position:absolute; 
   top:0; 
   bottom:0; 
   left:0; 
   right:0;
   background-color : blue;
   color : white;    
}
.inner {
    width : 30%;
    float:right;
    height:30%;
    background-color : red;
    background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0);
    color : white;  
}
.fixedpos {
    width : 200px;
    float:left;
    height:200px;
    background-color : red;
    background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0);
    color : white;  
}