右侧有一个空白区域，并使用引导程序在右下角重复图像[关闭]

Question

情况如下：

这是 www.dreamstreetentertainment.com 的屏幕截图，该网站仍在建设中，但仍然存在。不要问。客户想要那个。我只想说，我在右边有一个空白区域，在右下角有一个重复的图像。

背景是碎片：

1. 云上移动的分段
2. 背景天空
3. 好莱坞/洛杉矶天际线
4. 好莱坞之路
5. LAMPS（独立）和 CSS 集

问题：

客户使用 27 英寸显示器，您看到的图像（我使用 22 英寸显示器）被模拟到全屏的 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;
}

将背景大小更改为覆盖将使背景图像填充它的整个父容器，在这种情况下，“bg_clouds”填充整个视口。