CSS背景图片问题

Question

所以我有一个包装器div，背景图像覆盖整个页面。 这通常有效...我可以最大化浏览器和背景覆盖，但如果有滚动，图像会在滚动点停止。

此图像显示了jsFiddle example/1的滚动和间隙：

#wrapper
{
    background: url("../../Images/bgMain.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
}

和内部div

#inner
{
    margin: 0 auto;
    height: 100%;
    width: 980px;
}

任何建议都会有所帮助。 感谢

Answer 1

问题似乎是.inner上的固定宽度

.inner{
    //...
    width:980px;//this appears to be breaking the css3 background-size
}

一种可能的解决方案是在.wrapper上应用min-width

#wrapper {
    background: url("http://placekitten.com/400/300") no-repeat 50% 0 scroll;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    min-width:980px;
}

然而，这意味着你的可爱猫咪在微小的屏幕上将是巨大的（但是你已经在.inner上使用了固定宽度，这可能无关紧要）

see fiddle

Answer 2

我最近做过一些可能会做你想做的事情 - 什么都值得一试，对吧？

    background: #000 url(**snip**) no-repeat 50% 0 fixed !important;

尝试将！important 添加到css的末尾，它“覆盖”来自其他类的任何其他样式，等等。你永远不知道，它可能会奏效 - 但它也可能会打破别的东西。

什么！重要的事情可以找到here。

Answer 3

虽然这不是我想要的路线......通过在body而不是div中设置图像及其所有参数，我可以得到我正在寻找的行为。

我不知道为什么这就是......不知何故，身体被视为与div不同（虽然我确实有一个重置脚本，所以我不希望那样）...