1

如何获得响应式网站的背景以适应网站上的其余内容并与之一起移动？

我的背景被分割并没有覆盖整个背景，只是部分地创造了一种效果，每边都有不同的颜色（灰色）。

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

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

如果你看这张图片，它应该是这样的：

此外，这里是背景图像的脚本以及站点包装：

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

你可以在这里找到网站。

网站

4

1 回答 1

1

好的，您的页面可能需要进行一些重组，但我相信我有适合您的解决方案。

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

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

  • 删除“灰色”的背景（styles.css 中的第 1880 行）

  • 将内联规则应用于源代码第 230 行的“行”（NOT TO THE ROW RULE），如下所示：

        <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

于 2013-04-29T11:33:16.607 回答