background image is not showing in smaller screens while moving horizontally

Question

I designed a website with 960 grid system and applied a background image and alternate color through CSS for header and footer as below,

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; 
}

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. screenshot of footer after moved the scroll bar horizontally in 640x480px

Please help me to find solution. Thanks in advance.

Answer 1

If you are using the 960 GS you shouldn't be having this problem, because they have a min-width on the body. Ensure you haven't deleted this, or alter the value if your layout is wider than 960px:

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
    min-width: 960px;
}