title: background image is not showing in smaller screens while moving horizontally
body: <p>I designed a website with 960 grid system and applied a background image and alternate color through CSS for header and footer as below,</p>
  
  <pre><code>html {
  height: 100%;
  background: url(../images/htmlbg1.jpg) repeat-x;
  } 
  
  body {
  font-family:Geneva,Arial,Helvetica,sans-serif; font-size:12px;
  margin:0;
  width:100%;
  height: 100%;
  background:url(../images/headerdrbg.jpg) repeat-x 0 0;
  }
  
  footer { 
  width:100%; padding:12px 0px; 
  background:#404040 url(../images/footertop1.jpg) repeat-x 0 0;
  color:#808080; 
  }
  </code></pre>
  
  <p>It's working fine across most browsers.  It's looking fine small screen too. But when I scrolled horizontally, I'm unable to see the background image (ie.headerdrbg.jpg and footertop1.jpg). See attached image. <a href="http://i.stack.imgur.com/gw4OH.png" rel="nofollow">screenshot of footer after moved the scroll bar horizontally in 640x480px </a></p>
  
  <p>Please help me to find solution. Thanks in advance.</p>