当屏幕尺寸发生变化时，响应式网站上的背景图片不适合

Question

我如何获得响应式网站的背景，以适应和移动网站上的其他内容？

我的背景是分割不覆盖整个背景，只是部分创建一个效果，每个边都是不同的颜色（灰色）。

但是，当我更改屏幕大小时，所有元素都将被移动，背景将不会像最初那样定位。

我怎样才能确保无论窗口大小如何，“灰条”总是适合主要内容？

如果你看一下这张照片，它应该是这样的：

此处还有背景图片的脚本以及网站包装：

.gray {background:url(http://frenchegg.com/images/gray.png) no-repeat; height:100%;}
.lgr {background-size:85% 100%; background-position:center;}
.main-content p {
    color:#555;
}

.site-wrap {
    position:relative;
    min-height:100%;
    background-color:#ebebeb;
}

您可以找到网站here.

Answer 1

好的，你的页面可能需要一些重组，但我相信我有一个解决方案。

最初，主要问题源于背景大小设置为百分比宽度（注意background-size是css3属性而不是完全支持...但这是另一个问题。）

要获得概念证明，并且要了解您将要更改的内容，请尝试以下操作：

• 删除'gray'上的背景（styles.css中的第1880行）

• 将内联规则应用于源代码行230中的“行”（不是行规则），如下所示：

      <div class="main-content">
  
          <div class="row" style="
              padding: 65px;
              background: url(http://frenchegg.com/images/gray.png) no-repeat;
              background-size: 85% 100%; background-position: center;">
  

出于复制目的，规则如下。

    padding: 65px;
    background: url(http://frenchegg.com/images/gray.png) no-repeat;
    background-size: 85% 100%;
    background-position: center;

请注意填充有点棘手，但它只是向您展示您的背景需要正确响应的位置。

干杯队友，

GW