背景仅与视口一样宽

Question

烦人的问题

当我放大我的视口窗口（在firefox，chrome中），然后水平向右滚动时，我的背景图像被剪裁

图像最能描述正在发生的事情：

放大

- 图片仅与视口

一样宽

缩小输出 - 问题不会发生

以下是我的css中可能相关的部分内容：

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

无论是否应用cssgradients都会发生这种情况 - 真的难倒在这里

Answer 1

解决此问题的方法是在身体上设置最小宽度：

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

这解决了我所拥有的所有浏览器以及iphone的问题（根据iphonetester，虽然我意识到现在最好添加一些媒体查询以真正为手持设备用户提供最佳解决方案