JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://eternaware.com/ac/lab01.png"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>templates</title>
<meta name="description" content="" />
<meta name="author" content="Alex" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Sources -->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="main.js" /></script>
</head>
<body >
<div id="contAll">
<div id="imgMain">
<img src="http://eternaware.com/ac/lab01.png">
</div>
<div id="contBg">
<div id="bgTrim"></div>
<div id="bgFloor"></div>
</div>
</div>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-image: url("http://eternaware.com/ac/wall01.jpg");
}
#contAll {
position: absolute;
width: 100%;
height: 100%;
}
#imgMain {
position: relative;
width: 1100px;
margin: auto;
margin-top: 10px;
border: 0px solid #000;
}
#contBg {
position: relative;
width: 100%;
height: 100%;
min-width: 1100px;
top: -200px;
}
#bgTrim {
position: absolute;
width: 100%;
height: 40px;
margin: 0px;
padding: 0px;
left: 0px;
background-image: url("http://eternaware.com/ac/trim01.jpg");
background-repeat: repeat-x;
z-index: -1;
}
#bgFloor {
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
top: 40px;
left: 0px;
background-image: url("http://eternaware.com/ac/wood01.jpg");
background-repeat: repeat;
z-index: -1;
overflow: hidden;
}