背景图像结束时，较大监视器上的空白区域

Question

我正在为我的网站使用Bootstrap，HTML和CSS。我在我的Macbook Pro上构建它，现在当我移动到我的桌面显示器（更大）时，由于显示器的宽度要大得多，网页右侧似乎有一个很大的空白区域。

高度工作得非常好，并且可以很好地扩展，但是当图像结束（宽度）网站想要继续前进时，它似乎是正确的，但是没有拉伸图像以适应水平较大的显示器（宽度）。 / p>

我该如何解决这个问题？

网站问题图片：

这就是我到目前为止所提出的。

BODY[TEXT]

感谢所有建议，谢谢！

Answer 1

如果没有你的HTML代码，我无法完全复制你正在做的事情，所以我将不得不假设一些事情......总是危险的！ LOL！

无论如何，我会首先告诉你我相信的是什么，然后我会解释一些要做的事情来解决这个问题，然后我会根据你已经提供的代码提供实际代码。

好的，我相信发生的事情是因为你没有指定你想要背景图像在身体里面的位置，默认情况下，浏览器会以100％的原始大小为你提供图像并浮动到左边。

为了获得全屏图像，我相信你正在拍摄，我首先将背景图像放在“html”标签内，而不是“body”标签。其次，我会让浏览器知道您希望图像居中而不是重复。然后我会告诉浏览器你想让图像“覆盖屏幕”。

所以，说到这里，这是我刚才解释的代码：

html {
    background: url("http://i.imgur.com/vDF3k2s.jpg")no-repeat center;
    background-size: cover;
    overflow: auto;
}

我应该解释一下，我删除了代码的-webkit，-moz等部分。这是因为“溢出”与最常用浏览器的许多旧版本兼容，在你的代码中编写它是不必要的。

另外，当我在页面上创建全屏背景图像时，我通常使用“背景”而不是“背景图像”，我将“溢出”视为“隐藏”。我不能诚实地告诉你，如果这是一个“最佳实践”，或者你的写作“溢出”为“自动”，但我也不知道你打算采用什么其他内容，等等。

无论如何，我希望我的解决方案有所帮助，请让我回来让我知道！