JSFiddle - React, Tailwind, and code Playground
HTML
<div id="plantBackgroundHolder">
</div>
<div id="main_frame">
<div id="plant"></div>
</div>
CSS
body { overflow-x: hidden; min-width: 960px }
#main_frame {
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
-webkit-box-shadow:10px 10px 10px 0px #706270;
-moz-box-shadow:10px 10px 10px 0px #706270;
box-shadow:10px 10px 10px 0px #706270;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-color:#fff;
border-style:solid;
border-color:#000;
border-width:2px;
width:950px;
margin:20px auto;
/* new */
height: 600px;
background: #fff url(http://casaserena.heroku.com/images/plant.png) 500px -45px no-repeat
}
#plantBackgroundHolder {
width: 1200px;
height: 700px;
background: #fff url(http://casaserena.heroku.com/images/plant.png) 625px -25px no-repeat;
position: absolute;
z-index: -1;
top: 0;
margin-left: -600px;
left: 50%;
}
html,body{margin:0;padding:0}
body{height: 1000px} /*just for test */