FF和Chrome中不同的css背景图像

Question

我的情况很奇怪，我真的不明白为什么.以及如何克服这个问题。所以我不得不把背景图片放在1920x860大小的网站上。图像以不同的方式结束，例如:如果它没有延伸到整个窗口，图像的角落看起来很奇怪。

当我在FF中测试它时，它看起来不正常。我在22英寸的显示器上进行了测试(因此分辨率为1680x..)。当我在Chrome中测试时，图像延伸良好，看不到图像的角落。

但是:我有两个显示器，第二个是23英寸，因此分辨率与第一个没有太大不同，如果我在Crome上测试这个页面，也可以在FF上测试。

然后我使用了firebug工具，并尝试获取窗口的innerWidth。22英寸显示器的innerWidth为2124px，23英寸显示器为1776px。

如果有人能告诉我为什么会这样，我将不胜感激。如果有人知道如何放置这个图像，让它在每个显示器上都能很好地扩展……那会更好。

重点是-我必须将图像从一个角落扩展到另一个角落，在我的显示器上测试时，我不能确定其他用户会看到我所看到的:(

谢谢。

我将在这里发表评论...由于你们都很友好，我尝试了许多不同的解决方案。重点是图像不是覆盖整个背景-应该是看到的，底部应该只有一些颜色…现在我使用简单的背景: url() no-repeat top center ..

如果我使用-cover-图像是扩展的-但我只需要垂直扩展。我也使用了JS，但运行不正常，因为页脚是那个bg-image的一部分……然后变得一团糟。

也许，我会使用@media ..为更大的屏幕设置更大的图像(当然也会使用更大的图像)，但这只适用于更大的屏幕，否则设计将崩溃，我认为。

Answer 1

让我用谷歌搜索一下( 'css窗口背景‘的第一个结果)：

http://css-tricks.com/perfect-full-page-background-image/

简而言之：

html { 
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

另请参阅：http://caniuse.com/#search=background-size