css - 在响应式布局中绝对定位背景

Question

我正在设计一个响应式布局，并使用以下 CSS 在背景之上放置了一个脏兮兮的 png 叠加层:

#bg{
   background:url(images/top1.png) no-repeat; 
   position:absolute; 
   width:1423px; 
   height:350px; 
   top:0; 
   left:50%; 
   margin-left: -711px;
}

这样，无论页面宽度如何，图像始终居中。当浏览器窗口的宽度缩小到小于 #bg 叠加层的背景图像时，就会出现我的问题。出现水平滚动条，背景向右延伸很远(尤其是当浏览器非常小时)。

您可以在此处查看此演示:http://pixelcakecreative.com/cimlife/responsive2/

如您所见，出现了一个水平滚动条，我希望浏览器窗口缩小而不是保留图像的整个宽度!有什么想法吗？

Answer 1

试试这个 CSS 代码:

      #bg{
 background:url(images/top1.png) no-repeat center;
 position:absolute;
 width:100%;
 height:350px;
 top:0px;
 left:0px;
 }