The background is only as wide as the viewport

Question

Annoying problem

When I zoom in on the viewport window (happens in firefox, chrome) and then scroll horizontally to the right, my background images are cropped

images best show what happens:

increase

- the image will only be wider than the viewport

zoom out - no problem

Here are some sections of my css that may make a difference:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body{ width: 100%; } header#header { width: 100%; } header#header #background-image { height: 150px; background: url(/images/header/silhouette.png) repeat-x; } 

This happens with and without cssgradients - it really stands here

Answer 1

The fix for this is to set the minimum width on the body:

 body{ width:100%;min-width: 1002px; } 

This problem fixes all the browsers that I have, as well as the iphone (according to iphonetester , although I understand that it is probably best to add some media queries now really give the best solution for pocket users