Background image not displaying 100% width of iphone

Question

Hi I am getting some strange behaviour on my iphone using firefox but displaying perfectly in firefox on computer.  I do not wish to submit the name of site as I do not want it to show up in search results but if anyone can help me I will pm site address.  Thanks.
As the header's width is 100%, why is there the need for margin: 0 auto or text-align:center?  Surely  the background image should just display to 100% of the screen? Then the actual logo image that sits in the header div should have text align and margin auto yes?  I know that applying these rules this way does not center the logo within the div but WHY? I have uncommented out the text align and margin auto on the header div and it displays properly on my computer but not on the iphone.
With regards to iphone the background image stops short of the logo by a small amount, I have not designed a separate style sheet for iphones, not part of the scope but as the rest of the pages display ok why does the background image stop just short of the logo image?
I really appreciate your input.
This is the CSS
#header {
   width:100%;
  height:117px;
    padding: 0 0 0 0;
/*    text-align:center;
    margin:0 auto;*/
    background:url(images/header-bg2.jpg) left repeat-x;}
#header a img {
    border:none;
    padding:0;
    margin:0 auto;
    text-align:center;}
<div id="header">
<a href="http://www.xxxxxxxxxxxxxxx.com.au"><img src="images/KPS-logo.png" width="1024" height="117" alt="xxxxxxxxxxx Logo" /></a>
</div>  <!--END of header-->

Answer 1

You have nothing defining your background image size, just the box that holds it
try adding some CSS to control the actual background image...
background-size:cover;
background-position:right top;
background-repeat:no-repeat;
background-atachment:fixed;