Question

I see many sites that suffer from this, and I’ve only been recently been immersed in backgrounds that stretch 100%…

Examples are

http://brassblogs.com/blog/sticky-footer

http://beanstalkapp.com/

if you constrain the width of the browser and scroll right, it looks visually off: the background doesn’t carry over. How could you go about fixing this?

Edit: heh, as soon as I figured out the answer myself, I got the answer…. haha.

Answer 1

Your problem happens because the browser doesn’t know when to stop scaling the webpage when you resize the window. You’ll have to specify the smallest width that your design can tolerate:

html
{
  min-width: 1050px;
}

The min-width is kind of large, but if you make it much smaller, your background will bleed through and cause layout issues.

Also, you’ll have some issues with layout if you use percentages along with borders, margins, and padding (which is partially why your background images aren’t sticking properly).