JSFiddle - React, Tailwind, and code Playground

by nagendra_rao

HTML

<body>
		<div id="wrapper">
		<div id="div1">
			<div id="center">
                <div class="img"></div>
			</div>
		</div>
		<div id="div2">
		You can't see this without scrolling
		</div>
	</div>
	</body>

CSS

#wrapper{
				width: 100%;
			}
			#div1, #div2{
				position: absolute;
				height: 100%;
				width: 80%;
			}
			#div1, #div2, img{
				left: 0;
				right: 0;
				margin: auto;
			}
			#div1{
				background-color: red;
			}
			#div2{
				background-color: blue;
				top: 100%;
			}

			.img{
			    width:100%; 
                height:100%;
                background:url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg') center center no-repeat;
    background-size: 50% auto;
    
			}

            #center{
                height:100%;
            }