Question

以下是这种情况：

这是www.dreamstreetentertainment.com的屏幕截图，这个网站仍在建设中，但无论如何都是现场直播。不要问。客户希望如此。我只想说，我右边有一个白色的空间，右边的图像重复。

背景是碎片：

在
背景天空
好莱坞/洛杉矶的天际线
通往好莱坞之路
LAMPS（单独）和CSS集

ISSUE：

客户使用27＆＃34;监视器和您看到的图像（我使用22＆＃34;显示器）模拟到全屏的80％。

解决方案：

如何修复此侧白色空间和重复图像右下方？

这是

html,
body {
    margin: 0;
    min-height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    color: #ffffff;
    background-color:  rgba(0, 0, 0, 0);
    font-size: 18px;
    line-height: 1.8em;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
}

custom-ds.css中的OVERRIDE

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

但问题仍然存在。

我在其他已经建立的网站上有backstretch.js，但这很棘手，因为背景是在SEA和SKY的HORIZON分开的。

思想？

Answer 1

顶部空白区域是天空图像结束，底部空间是水图像结束，然后重复。

从

开始的简单方法

致不改变图像就是改变以下的CSS。

.waterBackground {
    background-repeat: no-repeat;
    background-size: cover;
}
.skyBackground {
    background-repeat: no-repeat;
    background-size: cover;
}

将背景大小更改为覆盖将使背景图像填充整个父容器，在这种情况下＆＃34; bg_clouds＆＃34;它填满了整个视口。

右侧有一个空白区域，并使用bootstrap

1 个答案: