footer scales and scrolls incorrectly on iPhone

When viewed on an iPhone the floating footer on my site scales at a different rate than the background and will not horizontally scroll the full length of the JPG which comprises it. It is viewable at:

staging.primomotif/audenskitchen/

The footer.php reads like this:

<div class="container">

	<div class=" fourteen columns footer">
       <div class="thirteen columns menu1">

 <?php wp_nav_menu(array(

	'menu'=> 'main_nav',
	'menu_id'=> 'main-nav',
	'depth'=> '0'

));?>
       		<!-- <ul id="main-nav">
            	<li><a href="#">Menus</a></li>
                <li><a href="#">Snapshots</a></li>
                <li><a href="#">Takeaway</a></li>
                <li><a href="#">Crew</a></li>
                <li><a href="#">Party's & Meetings</a></li>
                <li><a href="#">Press</a></li>
            </ul> -->
       </div>
    </div>
</div>

<!-- End Document
================================================== -->
	<?php wp_footer(); ?>

	<!-- Don't forget analytics -->
</body>
</html>

The footer statement in the stylesheet.css file is as follows:

.footerHome{background-image:url(https://staging.primomotif.com/audenskitchen/wp-content/uploads/2012/08/menu_background_bottom_sm.png); background-repeat:no-repeat; height:101px; clear:both; position:fixed; bottom:0; margin-top: -101px; clear:both; z-index: 9999 !important;}
.footer{background-image:url(https://staging.primomotif.com/audenskitchen/wp-content/uploads/2012/08/menu_background_bottom_sm.png); background-repeat:no-repeat; height:101px; clear:both; position:fixed; bottom:0; margin-top: -101px; clear:both; z-index: 9999 !important;}

Any ideas?