滚动条背景消失。为什么？

Question

以下是我的内容：800px width div在100％width容器内，背景图片水平重复。

直播：http://www.baskra.com

当我调整浏览器窗口的大小时，会生成一个滚动条。当我滚动它时，我看到背景图像仅应用于原始未打印区域，如上所示。

我该如何解决这个问题？

JSFiddle：http://jsfiddle.net/wcdXK（并非每个图像都有效，但我相信这里最重要的是CSS。）

Answer 1

你应该更换＆＃34;宽度：100％＆＃34;来自.pages-container CSS类，其中＆＃34; min-width：800px＆＃34; - 如果窗口大小小于800px，它将强制背景与容器的宽度相同。

.pages-container {
   background-attachment: scroll;
   background-image: url('http://baskra.com/images/bg/bg-scroll.png');
   background-repeat: repeat;
   min-width: 800px;
   left: 0;
}

在此处查看：http://jsfiddle.net/wcdXK/3/

Answer 2

因为宽度适用于包含块的区域，所以当整个容器较小时，背景会缩小以应用于同一区域（以及pages-container元素）。

Answer 3

我注意到您在布局上遇到了很多问题（您发布了类似的问题）

您应阅读试图了解媒体查询的响应式网页设计文章

像这样（从谷歌随机挑选）http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/