Double Background image top and bottom

Question

Hello Stack overflow, Need help on this anyone? The problem on this one is if you will zoom-out the browser the grass & tower is resizing. because of the position:fixed top:270px; This is for the grass & tower will be on the right location on the page. If I will put a top:0; its good because its stick on the top but the problem is the cloud has another div. Any can help me on this one?

Here's the link: http://dev.htcando.com/ASC/Agrilife/

#try { position:fixed; top:270px; left:0; width:100%; height:100%;}
#try img {width:100%; height:100%;}
/*#mid {display:block; height:100%; overflow:hidden;width:100%;z-index:1;}*/
html, body { height:100%; width:100%;max-height:100%;position:relative;overflow: auto;}
#up {background:#d0efea url(images/up-img.jpg) repeat-x; } 
body  {font:bold 12px/1.6em Arial, Helvetica, sans-serif;margin: 0; padding: 0;text-align:left;color: #000000; min-width: 800px;
       min-height: 600px;}
#top {background:#8dba76; padding:5px; font-size:12px;}

HTML

<div id="try" class="img">
<img src="images/bottoms.jpg" />    </div>

<div id="up">

Answer 1

I'm not seeing your issue, I looked at the site in IE & Chrome, and it looks fine... So what exactly is the problem?